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

I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:

我正在寻找一个超级简单的方法来创建一个两列格式来显示网页上的一些数据。如何达到以下的格式:

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

I'm open to HTML5 / CSS3 techniques as well.

我也喜欢HTML5 / CSS3技术。

11 个解决方案

#1

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

Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.

确保列宽之和等于包装宽度。另外，您也可以使用百分比值来表示宽度。

For more info on basic layout techniques using CSS have a look at this tutorial

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

#2

Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes.

你可以用css表格代替html表格。这使html在语义上保持正确，但是允许您出于布局目的使用表。

This seems to make more sense than using float hacks.

这似乎比使用浮动技巧更有意义。

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

#3

I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...

我知道这个问题已经得到了回答，但是在处理了相当多的布局之后，我想添加一个替代的答案来解决浮动元素的一些传统问题……

You can see the updated example in action here.

您可以在这里看到更新后的示例。

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

It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).

使用HTML 4.01或HTML5时是否使用语义元素没有区别(您需要声明左容器和右容器作为显示:如果还没有的话)。

CSS

CSS

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

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

HTML

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>

There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:

还有一个相当简洁(尽管更新)的CSS，它允许您将内容布局到列中，而不需要用到div:

column-count: 2;

#4

There's now a much simpler solution than when this question was originally asked, five years ago. A CSS Flexbox makes the two column layout originally asked for easy. This is the bare bones equivalent of the table in the original question:

现在有一种比五年前最初提出这个问题时简单得多的解决办法。CSS Flexbox使原本要求的两列布局更加简单。这是在最初的问题中，与桌子相当的骨头:

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

One of the nice things about a Flexbox is that it lets you easily specify how child elements should shrink and grow to adjust to the container size. I will expand on the above example to make the box the full width of the page, make the left column a minimum of 75px wide, and grow the right column to capture the leftover space. I will also pull the style into its own proper block, assign some background colors so that the columns are apparent, and add legacy Flex support for some older browsers.

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 is relatively new, and so if you're stuck having to support IE 8 and IE 9 you can't use it. However, as of this writing, http://caniuse.com/#feat=flexbox indicates at least partial support by browsers used by 94.04% of the market.

Flex是比较新的，所以如果你不得不支持ie8和ie9，你就不能使用它。然而，在撰写本文时，http://caniuse.com/#feat=flexbox至少显示了94.04%市场用户所使用的浏览器的部分支持。

#5

Well, if you want the super easiest method, just put

如果你想要最简单的方法，就把它写下来

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

though you may need more than that depending on what other layout requirements you have.

虽然您可能需要更多，但这取决于您的其他布局需求。

#6

All the previous answers only provide a hard-coded location of where the first column ends and the second column starts. I would have expected that this is not required or even not wanted.

所有前面的答案只提供了第一列结束和第二列开始的硬编码位置。我本以为这不是必需的，甚至是不需要的。

Recent CSS versions know about an attribute called columns which makes column based layouts super easy. For older browsers you need to include -moz-columns and -webkit-columns, too.

最近的CSS版本知道一个名为columns的属性，它使得基于列的布局非常容易。对于较老的浏览器，您还需要包含- mozilla列和-webkit-列。

Here's a very simple example which creates up to three columns if each of them has at least 200 pixes width, otherwise less columns are used:

这里有一个非常简单的例子，如果每个列至少有200个pixes宽度，那么就会创建三个列，否则将使用更少的列:

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

#7

If you want to do it the HTML5 way (this particular code works better for things like blogs, where <article> is used multiple times, once for each blog entry teaser; ultimately, the elements themselves don't matter much, it's the styling and element placement that will get you your desired results):

如果你想用HTML5的方式(这段代码对于像blog这样的东西更好，

被多次使用，每一个博客条目提示符一次;最终，元素本身并不重要，关键是样式和元素的放置会让你得到你想要的结果。

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

#8

I know this is an old post, but figured I'd add my two penneth. How about the seldom used and oft' forgot Description list? With a simple bit of css you can get a really clean markup.

我知道这是一个老帖子，但我想我应该加上我的两个便士。很少使用和经常被遗忘的描述列表呢?使用简单的css，你可以得到一个真正干净的标记。

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

take a look at this example http://codepen.io/butlerps/pen/wGmXPL

看看这个例子http://codepen.io/butlerps/pen/wGmXPL

#9

This code not only allows you to add two columns, it allows you to add as many coloumns as you want and align them left or right, change colors, add links etc. Check out the Fiddle link also

这段代码不仅允许您添加两列，还允许您添加任意数量的coloumns，并将它们向左或向右对齐，更改颜色，添加链接等等

Fiddle Link : http://jsfiddle.net/eguFN/

小提琴链接: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 is as follows

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;

}

#10

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

Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).

显然，您需要调整列的大小以适应您的站点以及颜色等，但这应该可以做到。您还需要确保您的ContentLeft和ContentRight宽度不超过内容宽度(包括边距)。

#11

a few small changes to make it responsive

有一些小的变化使它响应。

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

#1

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