多行 div 中的 CSS 间距答案

【问题标题】：CSS Spacing in Multiline Divs多行 div 中的 CSS 间距
【发布时间】：2013-09-17 20:57:51
【问题描述】：

我试图弄清楚为什么我在父 div 中平铺一系列 div 时会出现间距问题。这是小提琴：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 之间获得统一的间距？

【问题讨论】：

你的小提琴没有重现问题。
看来我发布这个有点草率——在 div.priority 规则中添加 vertical-align: middle 就可以了。我开始了解这条规则何时有效，何时无效，但我还有一段路要走。
对不起，Patsy——我想我可能在你看小提琴之前就已经加入了修复它的规则。

标签： css alignment

【解决方案1】：

像这样？ 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;
}

【讨论】：

【解决方案2】：

使用这个 css 工作 DEMO HERE

#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;
vertical-align: middle;/* ADDED */
}

【讨论】：

谢谢——我在发布后不久就发现了垂直对齐的罪魁祸首。我爱这个社区！

【解决方案3】：

如果您不关心 div 的高度，则将 height 属性更改为 auto... 像这样

#prioritiesWrapper div.priority
{
width: 350px;
height: auto;
display: inline-block;
margin: 10px 30px;
padding: 10px;
background-color: black;
text-align: left;
font-weight: bold;
line-height: 2em;
}

Fiddle here

【讨论】：

【解决方案4】：

这里是小提琴链接http://jsfiddle.net/SNSvU/11/。给#prioritiesWrapperoverflow:hidden和#prioritiesWrapper div.priorityfloat:left。我想就是这样。

【讨论】：