1

親 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;
}

特定の行の優先タイトルがすべて類似している限り (1 行または 2 行)、div 間の間隔は問題ないように見えますが、それらが異なる場合は、他の div がずれてしまいます。

コンテンツの行に関係なく、div 間の間隔を均一にするにはどうすればよいですか?

4

4 に答える 4

0

このような？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;
}
于 2013-09-17T12:41:05.580 に答える
0

ここにフィドルリンクhttp://jsfiddle.net/SNSvU/11/があります。#prioritiesWrapper overflow:hiddenとを与え#prioritiesWrapper div.priority float:leftます。それだけだと思います。

于 2013-09-17T12:57:51.763 に答える