响应宽度

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替换为以下内容

.step {width：33％; 高度：200px； 向左飘浮;}

float属性是非常非常常用的。 尽管我认为这对于初学者来说有点不直观。

Answer 2

这是使用display: inline-block;的副作用display: inline-block; 而不是float 。

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

div   (space)   div   (space)   div

通过删除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>

使用浮点数： 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>