我要成对地将响应的div并排垂直对齐。我用的是内联块而不是浮点数。我不能用flex btw。
在下面的例子中,我有5个div,但是最后一个(div5)在中间,而不是左对齐。我不明白为什么。
有什么建议吗?
发生的事情是:
div1 div2
div3 div4
div5
instead of:
div1 div2
div3 div4
div5
CSS和HTML:
div-container{
margin: 0 auto;
width: 95%;
}
div{
display: inline-block;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}
div:nth-child(2n+2) {
margin-right: 0;
}
<div class="div-container"><div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
</div>
最佳答案
尝试将text-align: left;
添加到div-container
关于javascript - 并排Inline-block div,最后一个错误地在中间对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40908210/