一排div中的第一项略有提升?

时间:2016-02-25 21:54:53

标签: html css

我试图制作一排三个div,但由于某种原因,我的最左边的div比其他两个稍高一点。这是一张正在发生的事情的图片: far left box is raised.

我想弄清楚他们为什么没有正确对齐。

#itemContainer {
  height: 70%;
  width: 20%;
}
.item-column {
  height: 95%;
  width: 25%;
  float: left;
  margin-left: 80px;
  margin-top: 100px;
}
.item-container {
  width: 100%;
  height: 50%;
  margin: 0 auto;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  /* Safari 3-4, iOS 4.0.2 - 4.2,   Android 2.3+ */
  -moz-box-shadow: 3px 3px 5px 6px #ccc;
  /* Firefox 3.5 - 3.6 */
  box-shadow: 3px 3px 5px 6px #ccc;
}
.item-picture-container {
  width: 100%;
  height: 70%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-radius: 5px 5px 0px 0px;
}
.item-picture-container img {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.item-description-container {
  width: 100%;
  height: 30%;
  padding-left: 30px;
  padding-top: 10px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  border: 1px solid black;
  border-radius: 0px 0px 10px 10px;
}
.item-title {
  font-size: 24px;
}
.item-description {
  font-size: 16px;
}
<div class="contentContainer" id="portfolioContainer">
  <div class="item-column">
    <div class="item-container">
      <div class="item-picture-container">
        <img src="./images/pivit.jpeg" />
      </div>
      <div class="item-description-container">
        <span class="item-title">Pivit</span>
        <br>
        <span class="item-description">iPhone App Development</span>
      </div>
    </div>
  </div>
  <div class="item-column">
    <div class="item-container">
      <div class="item-picture-container">
        <img src="./images/pivit.jpeg" />
      </div>
      <div class="item-description-container">
        <span class="item-title">Pivit</span>
        <br>
        <span class="item-description">iPhone App Development</span>
      </div>
    </div>
  </div>
  <div class="item-column">
    <div class="item-container">
      <div class="item-picture-container">
        <img src="./images/pivit.jpeg" />
      </div>
      <div class="item-description-container">
        <span class="item-title">Pivit</span>
        <br>
        <span class="item-description">iPhone App Development</span>
      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案