Question

我试图获得三个div来占据宽度的三分之一（33％），但是当我调整窗口大小时，它们会跳到整个地方并且不能正确排列。我做错了什么？

HTML

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

CSS

.step{
  width:33%;
  height:200px;
  display:inline-block;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

Answer 1

你需要使用float：left;并删除display：inline-block; 用以下

替换.step css

。步骤{宽度：33％;高度：200像素;浮动：左;}

浮动属性是非常常用的。虽然在我看来这对初学者来说有点不直观。

Answer 2

这是使用display: inline-block;代替float的副作用。

使用inline-block时，您的浏览器会将代码中的所有换行符视为空格，因此在您的情况下实际呈现的是：

div   (space)   div   (space)   div

通过删除代码之间代码中的换行符，您可以解决此问题。或者，您可以在之后使用float: left;和清算元素。

删除换行符： https://jsfiddle.net/qzdxtwhx/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

使用float： https://jsfiddle.net/qzdxtwhx/1/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>
<div class="clear"></div>

.step{
  width:33%;
  height:200px;
  float: left; /*Replace display: inline-block; */
}

.clear {  /*Add a 'clear' element to preserve natural layout*/
  clear: both;
}

Answer 3

将它们包装在父div中并将div的font-size设置为0，这样就可以摆脱断行，从而打破分隔行的步骤。您可以使用Santi的建议，但我实际上更喜欢使用内联块，我发现它更加防弹，需要清除浮动并且不能垂直对齐。

<div class="parent">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

CSS：

.parent{
  font-size: 0;
}

Answer 4

问题是div元素之间的空格也占用空间（因为它们是display:inline-block ）。

解决方案1：删除空白

使用html注释删除空格（还添加vertical-align:top以使它们在高度不同时保持顶部对齐）

.step{
  width:33%;
  height:200px;
  display:inline-block;
  vertical-align:top;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><!--
--><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><!--
--><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

解决方案2：使用float:left

.step{
  width:33%;
  height:200px;
  float:left;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

解决方案3：使用flexbox （现代最现代，更合适）

这需要一个包装元素。

.steps{display:flex}
.step {
  height: 200px;
  flex: 0 0 1;
}
.fa {
  color: darkgray;
  width: 100%;
  margin-top: 5%;
}
i {
  text-align: center;
}
.step p {
  padding: 5%;
  text-align: center;
}

<div class="steps">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

响应宽度

4 个答案: