简单的两列html布局，不使用表格
我正在寻找一个超级简单的方法来创build一个双列格式来显示一些网页上的数据。 我怎样才能达到相同的格式：
<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中还有一个相当整齐的（尽pipe较新的），它允许你将内容排列成列而不用所有的东西，
column-count: 2;
那么，如果你想要最简单的方法，就把它放在里面
<div class="left">left</div> <div class="right">right</div> .left { float: left; }
虽然你可能需要更多的取决于你有什么其他的布局要求。
所有以前的答案只提供了第一列结束和第二列开始的硬编码位置。 我会预料到这不是必需的，甚至不需要。
最近的CSS版本知道一个称为columns的属性，这使得基于列的布局变得非常容易。 对于旧版浏览器，您还需要包含-moz-columns和-webkit-columns 。
这是一个非常简单的例子，如果每个像素的宽度至less为200像素，那么最多可以创build三列，否则将使用较less的列：
<html> <head> <title>CSS based columns</title> </head> <body> <h1>CSS based columns</h1> <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;"> <li>Item one</li> <li>Item two</li> <li>Item three</li> <li>Item four</li> <li>Item five</li> <li>Item six</li> <li>Item eight</li> <li>Item nine</li> <li>Item ten</li> <li>Item eleven</li> <li>Item twelve</li> <li>Item thirteen</li> </ul> </body> </html>
现在比五年前最初提出这个问题时要简单得多。 一个CSS Flexbox使原来要求的两列布局变得简单。 这是原始问题中表格的等价物：
<div style="display: flex"> <div>AAA</div> <div>BBB</div> </div>
Flexbox的好处之一是，它可以让你轻松地指定子元素应该如何收缩和增长以适应容器大小。 我将展开上面的例子，使框为页面的整个宽度，使左栏最小宽度为75px，然后增长右栏以捕获剩余空间。 我也将这个样式放到它自己的块中，指定一些背景颜色，以便显示列，并为一些旧浏览器添加传统的Flex支持。
<style type="text/css"> .flexbox { display: -ms-flex; display: -webkit-flex; display: flex; width: 100%; } .left { background: #a0ffa0; min-width: 75px; flex-grow: 0; } .right { background: #a0a0ff; flex-grow: 1; } </style> ... <div class="flexbox"> <div class="left">AAA</div> <div class="right">BBB</div> </div>
Flex是相对较新的，所以如果你不得不支持IE 8和IE 9，你就不能使用它。 不过，在撰写本文时， http ://caniuse.com/#feat=flexbox至less表示94.04％的市场使用浏览器的部分支持。
如果你想这样做的HTML5的方式（这个特定的代码更好地工作，如博客，其中<article>多次使用，一次为每个博客条目传情;最终，元素本身并不重要，这是造型和元素的位置，将得到你想要的结果）：
<style type="text/css"> article { float: left; width: 500px; } aside { float: right; width: 200px; } #wrap { width: 700px; margin: 0 auto; } </style> <div id="wrap"> <article> Main content here </article> <aside> Sidebar stuff here </aside> </div>
我知道这是一个旧的post，但我想我会加上我的两个penneth。 如何很less使用和经常忘记说明列表？ 用一个简单的CSS你可以得到一个非常干净的标记。
<dl> <dt></dt><dd></dd> <dt></dt><dd></dd> <dt></dt><dd></dd> </dl>
此代码不仅允许您添加两列，它允许您添加尽可能多的颜色，并将其左右alignment，更改颜色，添加链接等。检查出小提琴链接也
小提琴链接： http : //jsfiddle.net/eguFN/
<div class="menu"> <ul class="menuUl"> <li class="menuli"><a href="#">Cadastro</a></li> <li class="menuli"><a href="#">Funcionamento</a></li> <li class="menuli"><a href="#">Regulamento</a></li> <li class="menuli"><a href="#">Contato</a></li> </ul> </div>
Css如下
.menu { font-family:arial; color:#000000; font-size:12px; text-align: left; margin-top:35px; } .menu a{ color:#000000 } .menuUl { list-style: none outside none; height: 34px; } .menuUl > li { display:inline-block; line-height: 33px; margin-right: 45px; }
<div id"content"> <div id"contentLeft"></div> <div id"contentRight"></div> </div> #content { clear: both; width: 950px; padding-bottom: 10px; background:#fff; overflow:hidden; } #contentLeft { float: left; display:inline; width: 630px; margin: 10px; background:#fff; } #contentRight { float: right; width: 270px; margin-top:25px; margin-right:15px; background:#d7e5f7; }
显然你将需要调整列的大小，以适应您的网站以及颜色等，但应该这样做。 您还需要确保您的ContentLeft和ContentRight宽度不超过内容宽度（包括边距）。
一些小的变化，使其响应
<style type="text/css"> #wrap { width: 100%; margin: 0 auto; display: table; } #left_col { float:left; width:50%; } #right_col { float:right; width:50%; } @media only screen and (max-width: 480px){ #left_col { width:100%; } #right_col { width:100%; } } </style> <div id="wrap"> <div id="left_col"> ... </div> <div id="right_col"> ... </div> </div>
