CSS：固定內部div的位置

我正試圖在div中導入用戶的Facebook好友。 Friend Divs定位不正確。他們正在根據名字的長度混淆。CSS：固定內部div的位置

Note:I was not able to show full name of friends because it was hard to fit in a small Friend Div.

CSS

#jfmfs-friend-container { 
    overflow:scroll; 
    overflow-x: hidden; 
    -ms-overflow-x: hidden; 
    width:100%; 
    height:7.6em; 
    color: #333; 
    background-color: #F7F7F7; 
    padding-top: 10px; 
} 
.jfmfs-friend {     
    cursor:pointer; 
    float:left; 
    height:3em; 
    width:12em; 
    font-size:11px; 
    overflow:hidden; 
    display:inline-block; 
    margin-bottom: 0.40em; 
} 
.friend-name { 
    padding-left: 5px; 
    width: 60px; 
    font-weight: bold; 
    color: #000; 
    font-size: 12px; 
} 

.friend-checkbox { 
    position: relative; 
    vertical-align:middle; 
    margin: 0px 0px 0px; 
} 

.friend-img { 
    padding-left: 5px; 
    width: 28px; 
    height: 28px; 
}

HTML

<div id="jfmfs-friend-container"> 
<div class="jfmfs-friend " id="00000000000"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/000000000/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000012"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000012/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000330"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000330/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000044"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000044/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000880"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000880/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000770"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000770/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
</div>

實際結果： enter image description here

來源

2013-04-07 Himanshu Yadav

你的HTML是無效的。 id屬性不能包含＃並且不應以數字開頭。 – ZippyV 2013-04-07 15:36:09

嘗試增加display:inline-block;到.friend-name

喜歡這個 - jsFiddle

.friend-name { 
    display:inline-block; 
    padding-left: 5px; 
    width: 70px; 
    font-weight: bold; 
    color: #000; 
    font-size: 12px; 
}

來源

2013-04-07 15:42:24 apaul

它的竅門，但現在全名出現，不適合div高度。朋友名字在這裏是一個問題，他們可能會很長，所以如果他們不適合div，只需要名字。 – 2013-04-07 15:49:18

在你的小提琴中，名字的高度超過了圖像的高度。 – 2013-04-07 15:50:25

試試這個 - http://jsfiddle.net/apaul34208/Yyjxe/1/ – apaul 2013-04-07 16:08:10

CSS：固定內部div的位置

回答

相關問題