Question

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

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

我也对HTML5 / CSS3技术持开放态度。

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

确保colum-width的总和等于wrap宽度。或者，您也可以使用宽度的百分比值。

有关使用CSS的基本布局技术的更多信息，请查看此tutorial

Answer 2

好吧，你可以做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>

Answer 3

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

您可以在此处查看更新后的示例。

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添加，允许您将内容布局到列中，而不是所有这些都与divs一起玩：

column-count: 2;

Answer 4

现在，与五年前最初提出这个问题时相比，这个解决方案要简单得多。 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表示至少部分支持94.04％的市场使用的浏览器。

Answer 5

好吧，如果您想要超级简单的方法，只需输入

即可

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

.left {
    float: left;    
}

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

Answer 6

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

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

这是一个非常简单的示例，如果每个列的宽度至少为200，则最多可创建三列，否则将使用更少的列：

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

Answer 7

如果你想用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>

Answer 8

我知道这是一个老帖子，但我想加上我的两个问题。怎么样很少使用和'忘记说明列表？只需简单的css就可以获得非常干净的标记。

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

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

Answer 9

此代码不仅允许您添加两列，它允许您添加任意数量的coloumns并向左或向右对齐，更改颜色，添加链接等。还可以查看Fiddle链接

小提琴链接：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;

}

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

显然，你需要调整列的大小以适应你的网站和颜色等，但是应该这样做。您还需要确保ContentLeft和ContentRight宽度不超过内容宽度（包括边距）。

Answer 11

进行一些小改动以使其响应

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

Answer 12

您可以使用 CSS Multiple Columns 属性创建文本列。您不需要任何表格或多个div。

HTML

<div class="column">
       <!-- paragraph text comes here -->
</div>

CSS

.column {
    column-count: 2;
    column-gap: 40px;
}

在https://www.w3schools.com/css/css3_multiple_columns.asp上了解有关CSS多列的更多信息

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

12 个答案: