Question

让我的4个灰色框全部显示在同一行有一些问题。通过给每个人提供25％的宽度，他们会自动显示1/4的屏幕尺寸，无论分辨率或屏幕尺寸如何。获得前3个，但第四个下降到下一行。关于如何强制它们在同一条线上的任何想法？

HTML

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>

CSS

.b1, .b2, .b3, .b4{
display:inline-block;
position: relative;
margin: 5px;
float:left;
width:25%;
height:400px;
background-color: lightgrey;

}

Answer 1

看看CSS Box Model。他们没有在同一条线上并排浮动的原因是因为你增加了保证金。您的内容区域的高度或宽度不考虑此边距。如果您使用了保证金以外的其他内容，则可以使用box-sizing属性，但这不是最佳方法。理想情况下，你会补偿你的保证金，所以像jsFiddle这样的东西应该让你开始。

强制性添加：宽度加起来 92％， 8％可以使用，所以如果你添加1％左边距和右边距1％，使用margin属性乘以4个项目（给出所需宽度的8％），你已经考虑了所有100％的宽度。

<强> HTML

<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>

<强> CSS

.b {
    display: inline-block;
    position: relative;
    margin: 1%;
    float: left;
    width: 23%;
    height: 400px;
    background-color: lightgrey;
}

Answer 2

给它一个机会 HTML

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>

CSS

.b1, .b2, .b3, .b4{
    display:inline-block;
    position: relative;
    margin: 5px;
    float:left;
    width: calc(25% - 10px);
    height:400px;
    background-color: lightgrey;
}

正如您所看到的宽度，我们使用 calc（）并使用原来的25％宽度减去左右边距的10px。

Answer 3

您的保证金是造成问题的原因。以这种方式看待，4个div中的每一个都需要25％的页面宽度加上5个像素的左边距和5个像素的右边距。因此，您的保证金要么需要基于百分比，要么需要减少每个div的百分比宽度以允许保证金。

CSS / HTML Box并排

3 个答案: