Question

我把这个html和css放在一起显示主页的特色项目，但由于某种原因，该框的内容似乎使这些框浮动到包含div的底部并取决于文字这意味着盒子会失去对齐。

我希望盒子都保持相同的高度，并且所有盒子都沿着蓝色div的顶部对齐。

CSS：

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.icon_css { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_css.png) #FFF; background-size: 80px; background-repeat: no-repeat; background-position: center; }
.icon_php { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_php7.png) #FFF; background-size: 75px; background-repeat: no-repeat; background-position: center; }
.icon_jquery { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_jquery.gif) #FFF; background-size: 110px; background-repeat: no-repeat; background-position: center; }
.icon_bootstrap { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_bootstrap.gif) #FFF; background-size: 160px; background-repeat: no-repeat; background-position: center; }

body { margin: 0px; }

h1 {
  text-align: center;
  font-family: 'Bree Serif', 'serif';
  font-size: 50px;
  color: #444;
  font-weight: lighter;
}

.featuredItemWrap {
  background: #E7E7E7;
  width: 250px;
  height: inherit;
  display: inline-block;
  margin-right: 5px; 
  margin-left: 5px; 
  margin-top: 25px;  
  text-align: center;
}

.featuredItemOuterWrap {
  background: #009CEF;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  text-align: center;

}

.featuredItemInner {
}

.featuredItemDesc {
  background: none;
  padding: 0px 20px 40px 20px;
  color: #444;
  font-family: 'Open Sans', sans-serif;
}

.featuredItemDesc h1 {
  font-family: 'Bree Serif', 'serif';
  font-size: 25px;
}

.featuredItemIcon {
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border-radius: 50%;
  border: 10px solid #E7E7E7;
}

CodePen

Answer 1

您可以为.featuredItemOuterWrap容器及其内部项目使用flex布局：

.featuredItemOuterWrap{
  display:flex;
  justify-content:center;
}

CodePen

Answer 2

没关系，我自己解决了。

在我的vertical-align: top;上使用.itemDivs。

CSS：在容器中按下div

2 个答案: