內嵌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>