如何创建一个简单的 2 列布局，它们之间的边距为 5 像素？
像这样:
这很棘手，因为如果您尝试将两列的宽度都设置为 50%，然后尝试为其中一列或两列添加边距，其中一列将被推到另一列下方，以便填充 50%。
最佳答案
您没有提供大量信息，但一个简单但丑陋的解决方案是使用包装器 div:
<!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>
由于额外的 div 而显得丑陋，但是当您开始混合单位(像素和％)时，这是很难避免的。
关于html - 是否可以创建 2 个 50% 的列，边距为 5 像素，而不指定每列的确切宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5354055/