0
我確實將「div.avatar-block」設置爲放置在線用戶的圖像，我也將「div.avatar-block」高度設置爲「auto」，但是我請勿自動展開我的圖片空間。圖像沒有在框中顯示出來
這是我的CSS用的jsfiddle鏈接http://jsfiddle.net/3Jurq/
body {
width:320px;
}
#content {
background-color: #353535;
font-family:'Lato', sans-serif;
padding-bottom: 30px;
}
#content .padder {
background-color: white;
padding:5px;
margin-right:5%;
margin-left: 5%;
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
form#members-directory-form h3 {
padding: 10px 0 10px 10px;
}
form#members-directory-form div#members-dir-search {
padding: 10px 0 10px 10px;
}
#members-dir-list {
padding: 10px 0 10px 10px;
}
#pag-bottom.pagination .pag-count#member-dir-count-bottom {
padding-top: 10px;
}
div.avatar-block {
height: auto;
width: 94%;
position: relative;
}
div.avatar-block .item-avatar {
float: left;
padding-left: 10px;
}
div.item-avatar a {
height: 200px;
width: 200px;
}
和源代碼
<body>
<div id="container">
<div id="content">
<div class="padder">
<form class="dir-form" id="members-directory-form" method="post" action="">
<h3>Members Directory</h3>
<div role="search" class="dir-search" id="members-dir-search">
<label>
<input type="text" placeholder="Search Members..." id="members_search" name="s">
</label>
<input type="submit" value="Search" name="members_search_submit" id="members_search_submit">
</div>
</form>
<div class="members dir-list" id="members-dir-list">
<h3>Online Users</h3>
<br>
<div class="avatar-block">
<div class="item-avatar"> <a title="admin" href="blank">
<img width="150" height="150" alt="Profile picture of admin" class="avatar user-1-avatar avatar- photo" src="http://imageshack.us/a/img89/3994/e6n6.png"></a>
<div class="item-title-members"> <a href="blank">admin</a>
</div>
</div>
<div class="item-avatar"> <a title="ovolo" href="blank">
<img width="150" height="150" alt="Profile picture of ovolo" class="avatar user-7-avatar avatar- photo" src="http://imageshack.us/a/img89/3994/e6n6.png
http://imageshack.us/a/img39/175/9pwo.png
"></a>
<div class="item-title-members"> <a href="blank">ovolo</a>
</div>
</div>
</div>
</div>
<!-- #members-dir-list -->
<input type="hidden" value="243376e69d" name="_wpnonce-member-filter" id="_wpnonce-member-filter">
<input type="hidden" value="/ovolo-dev/user/" name="_wp_http_referer">
<!-- #members-directory-form -->
</div>
<!-- .padder -->
</div>
<!-- #content -->
</div>
</body>
一個你可能會碰到的是你已經設置你的寬度百分比和像素填充問題。我會建議以百分比或像素來設置所有內容。一個很好的訣竅就是把填充的計算放在行尾的註釋裏/ * 10/320 * /所以當你看到3.125％時，你知道你是如何得到這個數字的。 – otherDewi