Question

基本上我所追求的是css中的流体解决方案，类似于下面的表格布局。此布局背后的主要是3x3网格，用户可以将内容添加到第一个流体区域，它将扩展完整页面宽度。但如果该用户决定他想要第二和第三区域的内容，则所有3个td的填充宽度的33％。

有效的是我要问的是如何创建一个基于CSS的布局，可以像表布局一样做？

     <table width="100%">
     <tr>
      <td id="leftZone" >
      fluid area here
      </td>
      <td >
        fluid area here
      </td>  
      <td id="rightZone">
      fluid area here
      </td>
     </tr>
     </table>
     <table width="100%"> 
     <tr>
      <td valign="top" >
      fluid area here
      </td>
      <td >
     fluid area here
      </td> 
      <td >
      fluid area here
      </td>
     </tr> 
     </table>
     <table width="100%">  
     <tr>
      <td >
       fluid area here
      </td>
      <td >
       fluid area here
      </td> 
      <td >
       fluid area here
      </td>
     </tr>
     </table>

Answer 1

听起来你指的是布局的圣杯。查看以下主题的资源：

http://www.alistapart.com/articles/holygrail

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Answer 2

这可能是一种更好的方法，但这是我的第一个想法。

<!doctype html>
<html>
<head><style type="text/css">
    div
    {
        display: table;
    }
    div p
    {
        display: table-cell;
    }
</style></head>
<body>
<div>
    <p>1 fluid area here</p>
    <p>2 fluid area here</p>
    <p>3 fluid area here</p>
</div>
<div>
    <p>4 fluid area here</p>
    <p>5 fluid area here</p>
    <p>6 fluid area here</p>
</div>
<div>
    <p>7 fluid area here</p>
    <p>8 fluid area here</p>
    <p>9 fluid area here</p>
</div>
</body>
</html>

在css中创建一个像表一样工作的水平流体布局

2 个答案: