我想弄清楚为什么在父 div 中平铺一系列 div 时出现间距问题。这是 fiddle :http://jsfiddle.net/SNSvU/4/ .这就是我所拥有的:
HTML
<div id="prioritiesWrapper">
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
CSS
#prioritiesWrapper {
color: white;
background-color: blue;
margin: 0 auto;
}
#prioritiesWrapper .priority .img {
float: left;
height: 50px;
margin: 0 15px 0 0;
}
#prioritiesWrapper .priority .title {
margin: auto 0;
}
#prioritiesWrapper div.priority {
width: 350px;
height: 80px;
display: inline-block;
margin: 10px 30px;
padding: 10px;
background-color: black;
text-align: left;
font-weight: bold;
line-height: 2em;
}
只要给定行上的优先级标题都相似(一行或两行),div 之间的间距似乎就可以了,但如果它们不同,则会导致另一个 div 不对齐。
无论内容行如何,如何在 div 之间获得统一的间距?
最佳答案
像这样? http://jsfiddle.net/SNSvU/5/
#prioritiesWrapper div.priority
{
width: 600px;
height: 80px;
display: inline-block;
margin: 10px 30px;
padding: 10px;
background-color: black;
text-align: left;
font-weight: bold;
line-height: 2em;
}
或者你希望它像这样更有活力? http://jsfiddle.net/SNSvU/6/
#prioritiesWrapper div.priority
{
width: auto;
height: 80px;
display: block;
margin: 10px 30px;
padding: 10px;
background-color: black;
text-align: left;
font-weight: bold;
line-height: 2em;
}
关于多行 Div 中的 CSS 间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18850077/