5

让我的 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;
}
4

3 回答 3

5

看看CSS 盒子模型。它们没有在同一条线上并排浮动的原因是因为您要添加边距。内容区域的高度或宽度不考虑此边距。如果你使用了除边距以外的东西，你可以使用box-sizing属性，但这不是最好的方法。理想情况下，你会补偿你的利润，所以像这个jsFiddle这样的东西应该让你开始。

强制性加法：宽度加起来为92%，剩下8%可以使用，所以如果你添加 1% 的 margin-left 和 1% 的 margin-right，使用 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;
}
于 2013-09-27T00:00:37.717 回答
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 边距。

于 2013-09-27T00:00:05.510 回答
1

您的保证金是导致问题的原因。这样看，4 个 div 中的每一个都需要 25% 的页面宽度加上 5 像素的左边距和 5 像素的右边距。所以你的边距要么需要基于百分比，要么你需要减少每个 div 的百分比宽度以允许边距。

于 2013-09-26T23:54:30.547 回答