凌乱的标题，但我没有其他方式来描述它。 我想做的是我在一行中有 3 个 boex，每边只有 1 px 边框，但无法让它工作，最右边的边框总是 2 px。如何解决？
检查代码:
#content {
width: 1016px;
min-height: 664px;
height: auto;
border: 1px solid #232323;
background-color: #12100e;
float: left;
padding: 0px;
}
#imagebox {
Width: 338px;
height: 221px;
padding-right: 0px;
padding-left: 0px;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
<html>
<head>
<link rel="StyleSheet" href="Main.css" type="text/css">
<title></title>
</head>
<body>
<div id="mainbody">
<div id="menu"></div>
<div id="content">
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
</div>
</div>
</body>
</html>
最佳答案
这是因为右侧边框在#imagebox 元素的总宽度上增加了 1px，因此宽度为 339px。
尝试将宽度减小到 337 像素，它们应该都适合
关于css - 3个 float div在固定宽度的容器中，当三个div与固定div with border的尺寸相同时div向下跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6021919/