Question

我将这些响应框并排放置，并在其中放置图像和文本。但是，由于文本的原因，某些框未正确对齐。我试图改变这一点，但没有成功。

HTML来了：

<div id="grid">
  <span class="box">
    <i class="fa fa-file-text fa-3x"></i>
    <div class="service">Super awesome box</div>
  </span>

  ...

</div>

和CSS：

#grid {
  width: 100%;
}
#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
}
#grid .box .service {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  color: #555;
}
#grid .box i {
  margin-top: 20px;
  color: #00406e;
}

在这里您可以看到问题所在：http://jsfiddle.net/et72powz/3/

是否有解决此问题的简便方法？

Answer 1

您的HTML无效。 division 标签不能嵌套在 span 内。设为span div，就可以了。

充分利用vertical-align将它们排列整齐。

http://jsfiddle.net/et72powz/15/

#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
  vertical-align: top
}

Answer 2

将height更改为min-height，并通过赋予vertical-align:top;为其分配位置（垂直对齐）

#grid .box {
    display: inline-block;
    width: 135px;
    min-height: 140px;
    margin: 11px;        
    background-color: #b7cfdd; 
    vertical-align:top;
}

还有个小提琴：http://jsfiddle.net/et72powz/11/

Answer 3

来自display: inline-block的问题替换为float: left，它将按您希望的方式检查更新的Fiddle。

Answer 4

我为您找到了解决方案，但我真的不知道为什么这样做的实际行为..我只是删除了您的某些CSS ..尝试使用此CSS代码..

#grid {
width: 100%;

}

#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;        
background-color: #b7cfdd; 
}

#grid .box i {
margin-top: 20px;
color: #00406e;
}

Answer 5

将flexbox用于网格。

#grid {
    width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

http://jsfiddle.net/et72powz/8/

由于内容原因，框的大小未正确垂直对齐

5 个答案: