我有一个垂直对齐的问题…我有几个div框,都有display:inline块…盒子是垂直排列的。然而,它们都是垂直交错的。
而且,奇怪的是,当我选择网页的区域时,我会看到方框之间的元素,它们正在拉伸该区域…但实际代码中没有其他元素(没有分隔符div)。
/* Related */
#related-wrap {
width: 100%;
margin: 20px 0;
}
h2.related-title {
/* See Author */
}
#related-container {
width: 100%;
margin: 10px 0;
vertical-align: top;
text-align: center;
/* background-color:#f5f5f5; */
}
.related-box {
width: 170px;
display: inline-block;
padding: 10px;
margin: 10px;
/* background-color:#FAFAFA; */
}
.related-box-first {} .related-box-last {} .related-img {
width: 150px;
height: 150px;
overflow: hidden;
margin-bottom: 10px;
}
.related-img img {
width: 100%;
height: auto;
}
.related-txt h3,
.related-txt h3 a {
width: 100%;
font-size: 20px;
line-height: 1.2;
text-transform: uppercase;
color: #000;
text-decoration: none;
padding: 0 5px;
}
<div id="related-wrap">
<h2 class="related-title">Related Posts</h2>
<div id="related-container">
<div class="related-box related-box-first">
<div class="related-img">
<a href="/fun-affordable-rugs/">
<img width="150" height="150" src="images/cce944801a98-150x150.jpeg" class="attachment-thumbnail wp-post-image" alt="cce944801a98" />
</a>
</div>
<!-- .related-img -->
<div class="related-txt">
<h3><a href="/fun-affordable-rugs/">Fun Affordable Rugs</a></h3>
</div>
<!-- .related-txt -->
</div>
<!-- .related-box -->
<div class="related-box">
<div class="related-img">
<a href="/dancing-water-speakers/">
<img width="150" height="112" src="images/Dancing-Water-Speakers-200x112-150x112.jpg" class="attachment-thumbnail wp-post-image" alt="dancing water speakers" />
</a>
</div>
<!-- .related-img -->
<div class="related-txt">
<h3><a href="/dancing-water-speakers/">Dancing Water Speakers</a></h3>
</div>
<!-- .related-txt -->
</div>
<!-- .related-box -->
<div class="related-box">
<div class="related-img">
<a href="/12-years-a-slave/">
<img width="135" height="150" src="images/00007402-135x150.jpg" class="attachment-thumbnail wp-post-image" alt="12 years a slave" />
</a>
</div>
<!-- .related-img -->
<div class="related-txt">
<h3><a href="/12-years-a-slave/">12 Years A Slave</a></h3>
</div>
<!-- .related-txt -->
</div>
<!-- .related-box -->
<div class="related-box related-box-last">
<div class="related-img">
<a href="/yogurt-granola-parfaits/">
<img width="150" height="150" src="images/Yogurt-Parfaits-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="yogurt, granola, fruit, parfaits, bridal" />
</a>
</div>
<!-- .related-img -->
<div class="related-txt">
<h3><a href="/yogurt-granola-parfaits/">Yogurt & Granola Parfaits</a></h3>
</div>
<!-- .related-txt -->
</div>
<!-- .related-box -->
</div>
<!-- #related-container -->
</div>
<!-- #related-wrap -->
最佳答案
将vertical-align: top;
添加到.related-box
:https://jsfiddle.net/tcv0pffa/
您还将边距应用到.related-box
,请删除此边距以删除空格:https://jsfiddle.net/tcv0pffa/1/
.related-box {
width:170px;
display:inline-block;
vertical-align: top;
padding:10px;
}