有没有可能在不为每列指定确切宽度的情况下，创建具有5像素边距的250%的列？
有没有可能在不为每列指定确切宽度的情况下，创建具有5像素边距的250%的列？
提问于 2011-03-18 23:19:57
我如何创建一个简单的2列布局，它们之间有5个像素的边距？
如下所示：
这很棘手，因为如果您尝试将两列的宽度都设置为50%，然后尝试向其中一列或两列添加边距，其中一列将被推到另一列的下方，以便它可以填充50%。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-03-18 23:39:52
您还没有提供很多信息，但是一个简单但丑陋的解决方案是使用包装器divs
<!doctype html>
<html>
<head>
<style type="text/css">
#right {
float: right;
width: 50%;
}
#left {
float: left;
width: 50%;
}
.left {
margin-right: 2px;
background-color: #F9F;
}
.right {
margin-left: 3px;
background-color: #9FF;
}
</style>
</head>
<body>
<div id="left"><div class="left">Left</div></div>
<div id="right"><div class="right">Right</div></div>
</body>
</html>难看是因为额外的divs，但当你开始混合单位(像素和%)时，这是很难避免的。
Stack Overflow用户
发布于 2011-03-18 23:25:34
对于几乎任何类型的多列布局，都是我的首选模板。
Stack Overflow用户
发布于 2011-03-18 23:28:37
这就是我想要的开始
<div id="container">
<div id="left" style="float:left; width:50%">content</div>
<div id="right" style="margin:left 5px;">content</div>
<div id="floatcap" style="clear:both:"/> //causes container to grow to the height of left column if left column is bigger
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5354055
复制相关文章
相似问题
腾讯云开发者
