并排的 CSS/HTML 框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19040556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/HTML Boxes side by side
提问by rthrdyjd ryjrydjg
Having some problems getting my 4 grey boxes all displayed on the same line. Thought by giving them each a 25% width they would automatically each display a 1/4 screen size no matter ones resolution or screen size. Get the first 3, but the fourth one drops down on the next line. Any ideas on how to force them all on the same line?
在让我的 4 个灰色框都显示在同一行上时遇到了一些问题。考虑给它们每个 25% 的宽度，无论分辨率或屏幕尺寸如何，它们都会自动显示 1/4 的屏幕尺寸。获得前 3 个，但第四个落在下一行。关于如何将它们全部放在同一条线上的任何想法？
HTML
HTML
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
CSS
CSS
.b1, .b2, .b3, .b4{
display:inline-block;
position: relative;
margin: 5px;
float:left;
width:25%;
height:400px;
background-color: lightgrey;
}
}
采纳答案by incutonez
Take a look at the CSS Box Model. The reason why they're not floating side by side on the same line is because you're adding a margin. This margin is not considered in the height or width of your content area. If you used something other than margin, you could use the box-sizingproperty, but that's not the best approach. Ideally, you'd compensate for your margin, so something like this jsFiddleshould get you started.
看看CSS 盒模型。它们不在同一条线上并排浮动的原因是因为您添加了边距。内容区域的高度或宽度不考虑此边距。如果您使用的不是边距，则可以使用box-sizing属性，但这不是最好的方法。理想情况下，你会补偿你的利润，所以像这个jsFiddle这样的东西应该让你开始。
Obligatory addition: the widths add up to 92%leaving 8%to work with, so if you add a margin-left of 1% and margin-right of 1%, that gets multiplied by 4 items using the margin property (gives you 8% for the required width), you've got all 100% width accounted for.
强制添加：宽度加起来为92%，剩下8%可以使用，所以如果你添加 1% 的左边距和 1% 的右边距，使用 margin 属性乘以 4 个项目（给你 8 % 表示所需的宽度），您已经考虑了所有 100% 的宽度。
HTML
HTML
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
CSS
CSS
.b {
display: inline-block;
position: relative;
margin: 1%;
float: left;
width: 23%;
height: 400px;
background-color: lightgrey;
}
回答by Darren
Give this a shot HTML
试一试 HTML
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
CSS
CSS
.b1, .b2, .b3, .b4{
display:inline-block;
position: relative;
margin: 5px;
float:left;
width: calc(25% - 10px);
height:400px;
background-color: lightgrey;
}
As you can see with the width, we use calc()and use the original 25% width minus the 10px of margin you have left and right.
正如您在宽度中看到的那样，我们使用calc()并使用原始 25% 的宽度减去您的左右边距的 10px。
回答by Ken Hannel
Your margin is what is causing the issue. Look at it this way, each of the 4 divs requires 25% of the page width PLUS a 5 pixel left margin and a 5 pixel right margin. So your margins either need to be percentage based or you need to decrease the percentage width of each div to allow for the margin.
您的保证金是导致问题的原因。这样看，4 个 div 中的每一个都需要 25% 的页面宽度加上 5 像素的左边距和 5 像素的右边距。所以你的边距要么需要基于百分比，要么你需要减少每个 div 的百分比宽度以允许边距。
