简单的两列html布局，不使用表格
简单的两列html布局，不使用表格
提问于 2011-06-17 19:48:12
我正在寻找一种超级简单的方法来创建一个两列的格式来显示网页上的一些数据。如何实现与以下格式相同的格式：
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>我也对HTML5 / CSS3技术持开放态度。
回答 10
Stack Overflow用户
回答已采纳
发布于 2011-06-17 19:50:03
<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>确保柱面宽度的总和等于包裹宽度。或者，您也可以使用宽度的百分比值。
有关使用CSS的基本布局技术的更多信息，请查看此tutorial
Stack Overflow用户
发布于 2013-02-07 07:25:28
嗯，你可以用css表格代替html表格。这使您的html在语义上保持正确，但允许您使用表格进行布局。
这似乎比使用float hacks更有意义。
#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;
}<div id="content-wrapper">
<div id="content">
<div id="nav">
Left hand content
</div>
<div id="body">
Right hand content
</div>
</div>
</div>
Stack Overflow用户
发布于 2016-05-16 22:23:04
与五年前最初提出这个问题时相比，现在有了一个简单得多的解决方案。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相对较新，所以如果你不得不支持IE8和IE9，你就不能使用它。然而，在撰写本文时，http://caniuse.com/#feat=flexbox表明94.04%的市场用户使用的浏览器至少提供了部分支持。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6385293
复制相关文章
相似问题
腾讯云开发者
