内嵌div导致布局不均

Question

我正在使用Twitter，并使用API​​将所有追随者和他们的屏幕名称向下拉出。我试图在我的网页上显示一个很好的“网格”。然而，目前看起来是这样的：当人的网名很长，所以它会在两行

的问题发生。我不知道为什么有时候把一个人在那样的线......

这里是我的CSS代码：

div.inline { 
float:left; 
padding-left: 40px; 
padding-bottom: 20px; 
text-align: center; 
font-family: sans-serif; 
width: 90px; 
} 

和HTML代码：

<div class = "inline"> 
    <?php echo $userName; ?><br> 
    <?php echo "<img src = ".$userImage." class = ".$class.">"; ?><br> 
    <select name = "choice"> 
     <option value = "blank"></option> 
     <option value = "cool">Cool</option> 
     <option value = "uncool">Uncool</option> 
    </select> 
</div> 

能

人帮帮我？也许有一种方法可以在他们的名字的第一行后面加一个空行，或者如果它的长度少于两行，就可以放入一行空行。

Answer 1

有人在一条线上的原因是因为每个div是不同的高度。将用户名包裹在一个元素中（例如div），并将高度设置为该高度，或者将高度设置为整个内联div。我认为将图像对齐很好，所以第一种选择是最好的。

<div class="inline"> 
    <div class="username"><?=$userName;?></div> 
    <?='<img src="'.$userImage.'" class="'.$class.'" alt="'.$userName.'" />';?><br /> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 

对于2号线使用以下方法：通过您要每行的line-height值

.username { 
    height: 30px; 
    line-height: 15px; 
} 

增加身高。

Answer 2

尝试这样：

<div class="inline"> 
    <div style="height: 32px; line-height: 16px"><?php echo $userName; ?></div><br /> 
    <img src=" <?php echo userImage; ?> " class=" <?php echo $class; ?> " /><br /> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 

的div高度应相当于两行文字。

Answer 3

指定名称和图像的固定高度。你的问题将得到解决。

更新你的标记，因为这：

<div class = "inline"> 
    <div class="name"><?php echo $userName; ?></div> 
    <div class="image"><?php echo "<img src = ".$userImage." class = ".$class.">"; ?></div> 
    <select name = "choice"> 
     <option value = "blank"></option> 
     <option value = "cool">Cool</option> 
     <option value = "uncool">Uncool</option> 
    </select> 
</div> 

和CSS类似的东西。

.name { height: 30px; } 
.image { height: 200px; } 

Answer 4

一个简单的解决方法是（用你class="inline"作为一种暗示）删除float:left与display:inline-block取代，因为你确实想inline元素。

inline-block元素自然对齐文本基线，这意味着，溅到新线较长的名称将会推动所有元素向下垂直位置，因此与名称最长的人将决定的垂直定位其他元素。

低于

See demo或示例代码：

CSS

div.inline { 
    display:inline-block; 
    padding-left: 40px; 
    padding-bottom: 20px; 
    text-align: center; 
    font-family: sans-serif; 
    width: 90px; 
} 

HTML

<div class="inline"> 
    short-ish username<br/> 
    <img src="http://lorempixel.com/80/100/cats/1"/><br/> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 
<div class="inline"> 
    name<br/> 
    <img src="http://lorempixel.com/80/100/cats/2"/><br/> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 
<div class="inline"> 
    A really, really long username<br/> 
    <img src="http://lorempixel.com/80/100/cats/3"/><br/> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 
<div class="inline"> 
    Short again<br/> 
    <img src="http://lorempixel.com/80/100/cats/4"/><br/> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div> 
<div class="inline"> 
    V.short<br/> 
    <img src="http://lorempixel.com/80/100/cats/5"/><br/> 
    <select name="choice"> 
     <option value="blank"></option> 
     <option value="cool">Cool</option> 
     <option value="uncool">Uncool</option> 
    </select> 
</div>