Question

我确实将“div.avatar-block”设置为我的在线用户的图像，我也将“div.avatar-block”高度设置为“auto”但我不会自动扩展我的空间图片。

这是我用jsfiddle链接http://jsfiddle.net/3Jurq/

的CSS

    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>

Answer 1

添加清除：两者都在底部

<div style='clear:both;'></div>

http://jsfiddle.net/3Jurq/1/

或者只是取消float：left

div.avatar-block .item-avatar {
    /*float: left;*/
    padding-left: 10px;
}

http://jsfiddle.net/3Jurq/5/

图像不会在框内显示

1 个答案: