Html 不使用表格的简单两列html布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6385293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple two column html layout without using tables
提问by Fixer
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 技术持开放态度。
回答by Dennis Traub
<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 的基本布局技术的更多信息，请查看本教程
回答by RobKohr
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>
回答by Fenton
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/
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 没有区别（如果左右容器尚未声明，则需要将它们声明为 display:block）。
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;
回答by twm
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=flexboxindicates at least partial support by browsers used by 94.04% of the market.
Flex 相对较新，因此如果您不得不支持 IE 8 和 IE 9，则无法使用它。然而，在撰写本文时，http://caniuse.com/#feat=flexbox表明至少有 94.04% 的市场使用的浏览器部分支持。
回答by fearofawhackplanet
Well, if you want the super easiestmethod, 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.
尽管根据您的其他布局要求，您可能需要更多。
回答by Axel Beckert
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 columnswhich makes column based layouts super easy. For older browsers you need to include -moz-columnsand -webkit-columns, too.
最近的 CSS 版本知道一个名为的属性columns，它使基于列的布局变得非常容易。对于较旧的浏览器，您也需要包含-moz-columns和-webkit-columns。
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 像素，则最多创建三列，否则使用较少的列：
<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>
回答by philip
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.
我知道这是一个旧帖子，但我想我会添加我的两个 Penneth。很少使用和经常忘记的描述列表怎么样？使用一些简单的 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
回答by Shauna
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 的方式来做（这个特定的代码更适合博客之类的东西，在那里<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>
回答by TThomas
You can create text columns with CSS Multiple Columnsproperty. You don't need any table or multiple divs.
您可以使用CSS Multiple Columns属性创建文本列。您不需要任何表格或多个 div。
HTML
HTML
<div class="column">
<!-- paragraph text comes here -->
</div>
CSS
CSS
.column {
column-count: 2;
column-gap: 40px;
}
Read more about CSS Multiple Columns at https://www.w3schools.com/css/css3_multiple_columns.asp
在https://www.w3schools.com/css/css3_multiple_columns.asp阅读有关 CSS 多列的更多信息
回答by harishannam
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
此代码不仅允许您添加两列，还允许您添加任意数量的列，并将它们向左或向右对齐，更改颜色，添加链接等。也请查看 Fiddle 链接
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;
}
