Css 图像不'；不要在盒子里露出来_Css

Css 图像不'；不要在盒子里露出来

css

Css 图像不'；不要在盒子里露出来,css,Css,我确实将“div.avatar-block”设置为放置在线用户的图像，也将“div.avatar-block”高度设置为“auto”，但我不会自动扩展图像的空间这是我的css和JSFIDLE链接和源代码 <body> <div id="container"> <div id="content"> <div class="padder">

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

这是我的css和JSFIDLE链接

和源代码

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


成员目录
在线用户

在底部添加清除：两个

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

我可以用css来做这件事，因为这是关于移动响应主题的。您可能会遇到的一个问题是，您已经将宽度设置为百分比，并将填充设置为像素。我建议将所有内容设置为百分比或像素。一个很好的技巧是将填充的计算放在一行末尾的注释中，只需/*10/320*/这样当你看到3.125%时，你就知道你是如何得到这个数字的。

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

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