Creating a horizontal fluid layout in css that works like a table_问答_开发者

Creating a horizontal fluid layout in css that works like a table

开发者 https://www.devze.com 2022-12-24 18:11 出处：网络

相关专题：css

Basically what i am after is a fluid solution in css, that is similar to the table layout below.The principal behind this layout is 3x3 grid where by a user can add content into the first fluid area and it will expand the complete width of the page. But if that user decides that he wants content in the 2nd and 3rd area, all 3 td's fill up 33% of the width.

Effectively what i am asking is how do i create a css based layout that can do the same as the table layout?

     <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>

It sounds like you are referring to the holy grail of layouts. Check out these resources on the topic:

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

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

There's probably a better way to do this, but this was my first idea.

<!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>