绝对巨难:求一<div>的样式问题, 三<div>成一排,第一个和第三个宽度固定,第二要求自适应屏蔽宽度如何实现? 问题是在CSS中width:后面不能用

<div class="Page-Center-99">
<div class="div_top_left"></div>
<div class="div_top_center"></div>
<div class="div_top_right"></div>
</div>
问题是在CSS中width:后面不能用 * 表示.如果不写width:70%;的话,图像填充宽又没有拉坤和填充..div_top_left
{
float:left;
clear:right;
width:120px;
height:27px;
background:url(http://localhost/AspNetForums/Images/Common/div_top_left.gif) no-repeat;
}
.div_top_center 
{
float:left;
clear:right;
width:70%;
height:27px;
background:url(http://localhost/AspNetForums/Images/Common/div_top_center.gif);
}
.div_top_right
{
float:left;
clear:right;
width:120px;
height:27px;
background:url(http://localhost/AspNetForums/Images/Common/div_top_right.gif) no-repeat;
}

解决方案 »

  1.   

    还有个问题:
    .Page-Center-99
    {
    padding:6px;
    width:99%;
    border:0;
    clear:both;
    vertical-align:top;
    }
    没有水平齐对属性,我要求该DIV center显示如何做?对了,我这是按web设计准备做的.
      

  2.   

    <table id=table1 width=100%>
       <tr>
          <td><div id=div1 width=100></div></td>
          <td><div id=div2 style="width:expression(document.getElementById('table1').offsetWidth-document.ofdocument.getElementById('div1').offsetWidth-document.getElementById('div2').offsetWidth;"</td>
          <td><div id=div3 width=100></div></td>
       </tr> 
    </table>
      

  3.   

    没办法了,只能:<div align="center">
    <div id="parentId" class="Page-Center-99">
    <div id="child-left" class="div_top_left"></div>
    <div class="div_top_center" style="width:expression(document.getElementById('parentId').offsetWidth-document.getElementById('child-left').offsetWidth-document.getElementById('child-right').offsetWidth);"></div>
    <div id="child-right" class="div_top_right"></div>
    </div>
    </div>在外多加一层<DIV>了. 有好办法的人请告诉我.暂不结贴.
      

  4.   

    http://www.w3cn.org/article/layout/2004/csslayout/threebox.html
      

  5.   

    #left {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 20px;
    padding: 10px;
    border: 5px solid #666;
    background: #FFF;
    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
    html>body #left {
    width: 120px; /* ie5win fudge ends */
    }
    #middle {
    margin: 20px 190px 20px 190px;
    padding: 10px;
    border: 5px solid #666;
    background: #FFF;
    }
    #right {
    position: absolute;
    top: 0px;
    right: 0px; /* Opera5.02 will show a space 
    at right when there is no scroll bar */
    margin: 20px;
    padding: 10px;
    border: 5px solid #666;
    background: #FFF;
    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
    html>body right {
    width: 120px; /* ie5win fudge ends */
    }
      

  6.   

    顺便还问一下:
    <img class="img_top_info_left"/>.img_top_info_left
    {
    border: 0px solid red;
    src:url(http://localhost/AspNetForums/Images/Common/div_top_info_left.gif);
    }
    为什么图片显示不了呢?
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>DIV布局测试</TITLE>
    <style>
    div
    {
     height:150px; 
    }
     div.left
    {
    width:20%;
    float:left;
    clear:right;
     background-color:#eeeeee;
       } div.center
     {
    width:50%;
    float:left;
    clear:right;
     background-color:#CCCCCC;
       }  div.right
     {
    width:30%;
    float:left;
    clear:right;
     background-color:#808080;
     }
     div.both
     {
    width:100%;
    clear:both; 
    background-color:#696969;  
       }</style>
    </HEAD><BODY>
    <div class="left">左侧</div>
    <div class="center">中侧</div>
    <div class="right">右侧</div><div class="both">全行</div> <div class="left">左侧</div>
    <div class="center">中侧</div>
    <div class="right">右侧</div>
    </BODY>
    </HTML>
      

  8.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>DIV布局测试</TITLE>
    <style>
    div
    {
     height:150px; 
    }
     div.left
    {
    width:20%;
    float:left;
    clear:right;
     background-color:#eeeeee;
       } div.center
     {
    width:50%;
    float:left;
    clear:right;
     background-color:#CCCCCC;
       }  div.right
     {
    width:30%;
    float:left;
    clear:right;
     background-color:#808080;
     }
     div.both
     {
    width:100%;
    clear:both; 
    background-color:#696969;  
       }</style>
    </HEAD><BODY>
    <div class="left">左侧</div>
    <div class="center">中侧</div>
    <div class="right">右侧</div><div class="both">全行</div> <div class="left">左侧</div>
    <div class="center">中侧</div>
    <div class="right">右侧</div>
    </BODY>
    </HTML>
      

  9.   

    So simple ^^
    在每个<div>里面加上 style="display:line" 即可。
    至于宽度，你自己去指定。