1. 首页
  2. 问答
  3. 简单的两列HTML布局，而无需使用表

简单的两列HTML布局，而无需使用表

2011-06-17 34 views
55

我正在寻找一个超级简单的方法来创建一个两列的格式显示在网页上的一些数据。我怎样才能达到相同的格式：简单的两列HTML布局，而无需使用表

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

我也接受HTML5/CSS3技术。

来源

2011-06-17 Fixer

回答

87 
<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-widths的总和等于包装宽度。或者，您也可以使用宽度的百分比值。

有关使用CSS布局基本技术的更多信息看看这个tutorial

来源

2011-06-17 11:50:03

+6

其实，你并不真的需要什么浮动的权利，既可以的div有浮动到左侧，效果是一样的东西是OP的要求。 – jackJoe

+12

您正在使用固定宽度的CSS列。表格版本具有动态宽度列。有时需要液体布局。然后怎样呢？ – Ryan

+2

漂浮有很多奇怪的副作用，例如，父容器不会在高度上展开以适合这些列的大小，并且会丢失框的大小。 – Mouscellaneous

7

好吧，如果你想超级简单方法，只是把

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

.left { 
    float: left;  
}

虽然你可能需要不止这取决于你有什么其他布局要求。

来源

2011-06-17 11:57:24 fearofawhackplanet

+2

为简单起见。 – Fixer

+0

实际上，代码就像你一样，不起作用。 http://jsfiddle.net/EMaDB/ – Shauna

+0

@Shauna：哎呀！我的意思是把'.left'不是'.right' :) – fearofawhackplanet

3

如果你想做到这一点，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>

来源

2011-06-17 12:03:05 Shauna

0 
<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宽度不超过内容宽度（包括边距）。

来源

2011-06-17 12:18:03 Magnum26

35

我知道这个问题已经回答了，但已经处理了布局公平一点，我想补充一点，解决了浮动元素几个传统问题的备选答案...

你可以看到更新例如在这里采取行动。

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

没有什么差别不管你是用HTML 4.01和HTML5语义元素（你需要将左，右容器声明为显示：块，如果他们没有的话）。

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;

来源

2011-06-17 12:52:08 Fenton

+2

+1列数 – Petter

+0

这里是文本垂直对齐div的中间部分 - http://jsfiddle.net/jy9qw/ – mikato

40

那么，你可以做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>

来源

2013-02-06 23:25:28 RobKohr

+3

I不知道为什么这是在底部。 – thatmiddleway

+0

据我可以告诉这是得到没有可以同时具有动态宽度列和高度相等的单元格的两列布局的唯一方法。所以如果你想要一个液体布局，这可能是一条路。 – Ryan

+0

你认为有一种方法可以将content和content-wrapper联合成一个html元素吗？ – dialer

1

此代码不仅允许您添加两列，它可以让你只要你想添加尽可能多的coloumns使它们对齐左或右，改变颜色，添加链接等退房的小提琴链接也

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

}

来源

2013-04-05 07:47:43 harishannam

6

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

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

这里是一个非常简单的例子，它最多可以创建三个列，如果他们每个人都有至少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>

来源

2014-12-13 15:55:54

+1

谢谢，完美无缺。如果需要，是否有办法强制新的列？ – jtr13

2

我知道这是一个古老的职位，但想通我'd添加我的两个penneth。如何很少使用和经常忘记的说明列表？用一个简单的CSS你可以得到一个非常干净的标记。

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

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

来源

2016-04-14 13:59:00 philip

7

现在有一个比当这个问题最初是问，五年前更简单的解决方案。一个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％的市场使用的浏览器。

来源

2016-05-16 14:23:03 twm

+0

比浮动更好的解决方案＃如果＃您的浏览器需求支持它。 – Sam

0

一些小的改动，使其响应

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

来源

2017-09-22 11:57:57 Altravista

相关问题

 相关问题