我正在寻找一种超级简单的方法来创建一个双列格式来显示网页上的一些数据.我怎样才能达到以下格式:
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
我也对HTML5/CSS3技术持开放态度.
Den*_*aub 91
<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的基本布局技术的更多信息,请查看本教程
Rob*_*ohr 41
好吧,你可以做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>
Fen*_*ton 35
我知道这个问题已经得到了解答,但是我已经处理了相当多的布局,我想添加一个替代答案来解决浮动元素的一些传统问题......
您可以在此处查看更新后的示例.
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中还有一个相当简洁(虽然更新)的附加功能,它允许您将内容布局到列中,而不会使用div来解决这些问题:
column-count: 2;
twm*_*twm 10
现在有一个比五年前最初提出这个问题时简单得多的解决方案.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%的市场使用的浏览器.
好吧,如果你想要最简单的方法,那就放
<div class="left">left</div>
<div class="right">right</div>
.left {
float: left;
}
虽然您可能需要更多,具体取决于您拥有的其他布局要求.
所有先前的答案仅提供第一列结束和第二列开始的位置的硬编码位置.我原本预计这不是必需的,甚至不需要.
最近的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>