我有四个连续的列,但是,当我向这些列添加内容时,每个后续列都会在页面上被下推。我不确定如何解决这个问题。
你可以在这里更好地理解我的问题,我增加了盒子的大小,并将其减少到两个盒子,而不是四个。 http://jsfiddle.net/x5zDj/
<div class="row">
<div class="column">
<h1>Latest News</h1>
<p>Lorem</p>
<p>Lorem</p>
</div>
<div class="column">
<h1>Application</h1>
</div>
</div>
我确定我忽略了一些愚蠢的事情......
最佳答案
使用inline-block
时,您需要将vertical-align
设置为您想要的属性。
在您的情况下,将其添加到您的 .column
CSS 如下更正了问题:
.column {
width: 460px;
height: 100%;
display: inline-block;
vertical-align: top; /* Adding this causes them to line up evenly across the top */
border: 1px solid #000;
padding: 15px;
}
关于html - 连续一个 div 的内容将其他 div 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24415822/