我试图制作一排三个div,但由于某种原因,我的最左边的div比其他两个稍高一点。这是一张正在发生的事情的图片:
我想弄清楚他们为什么没有正确对齐。
#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>