简单的两列html布局,不使用表格

我正在寻找一种超级简单的方法来创建两列格式来显示网页上的一些数据。 我怎样才能达到相同的格式:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

我也接受HTML5 / CSS3技术。


<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

确保柱宽的总和等于包装宽度。 或者,您也可以使用宽度的百分比值。

有关使用CSS的基本布局技术的更多信息,请参阅本教程


那么,你可以做CSS表而不是HTML表。 这使您的html语义上正确,但允许您使用表格进行布局。

这似乎比使用浮动黑客更有意义。

<html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>

我知道这个问题已经得到解答,但是我已经处理了一些布局,我想添加一个替代答案来解决浮动元素的一些传统问题。

你可以在这里看到更新的例子。

http://jsfiddle.net/Sohnee/EMaDB/1/

无论您是使用带语义元素的HTML 4.01还是HTML5,您都需要将左侧和右侧容器声明为display:block(如果尚未存在)。

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

CSS中还有一个相当整齐的(尽管较新的),它允许你将内容排列到列中,而不需要用div来播放所有内容:

column-count: 2;
链接地址: http://www.djcxy.com/p/94717.html

上一篇: Simple two column html layout without using tables

下一篇: Why does sortBy transformation trigger a Spark job?