清除某个div下的所有元素

时间:2014-09-07 19:12:10

标签: html css

我正在处理新闻Feed,我遇到了以下问题: 我想清除头像下的所有项目,因此下面没有包装文本或任何内容。

此图显示问题:
http://imgur.com/RgReblc

我希望它像这样(用Photoshop制作): http://imgur.com/1xP7rnn

代码:

.news .news-item .avatar {
  background-image: url("https://dl.dropboxusercontent.com/u/35853519/zakzek.png");
  width: 55px;
  height: 55px;
  background-size: cover;
  float: right;
  margin-left: 15px;
  display: block;
}

JSFiddle(查看全屏以获得更好的视图): http://jsfiddle.net/shadeed9/6npjgt7y/8/

谢谢,

5 个答案:

答案 0 :(得分:1)

DEMO

添加保证金

.meta{
margin-right: 70px;
}

DEMO

或添加填充

.meta{
padding-right: 70px;
}

或使用转换

答案 1 :(得分:1)

在不改变HTML结构的情况下,实现这一目标的一种方法是使用CSS在元内容div上添加边距。像这样:

div.meta { margin-right: 75px; }

这将把一切都移到左边。只需使边距大于你的头像图像宽度,就不会有任何包装。

答案 2 :(得分:1)

如果是关于处理浮点数,那么overflow:hidden;规则就可以了。

它显示了浮动元素在文档流程中位于内部和前后的元素。

http://jsfiddle.net/6npjgt7y/14/

.meta {
    overflow:hidden;
}

关于布局:) 所以也会触发它:display:table / inline-block / flexfloat也是如此。

答案 3 :(得分:0)

为头像和h2元素提供属性display: inline-block将会起作用,同时为h2元素设置width

http://jsfiddle.net/6npjgt7y/9/

答案 4 :(得分:0)

您可以使用表格,将头像放在一列,将其他内容放在第二列,如下所示:

<div class="news" dir="rtl">
    <div class="news-item">
        <table>
            <tr>
                <td style="vertical-align: top;">
                    <div class="avatar"></div>
                </td>
                <td>
                    <div class="meta">
                        <h1>اطلاق تطبيق مسنجر بلاك بيري رسميًا إلى أندرويد وiOS7</h1>
                        <h2>لندن - "القدس" - كشف مصدر من شركة اتصالات اميركية أن الطلب المسبق على هاتف "أبل" الجديد "آيفون 5 سي" ليس "هائلاً" كما أن حجم المعروض منه ومن النسخة الأعلى سعراً جاء مخيباً للآمال. كشفت "أبل" الأسبوع الماضي النقاب عن أحدث طرازين...</h2>
                        <img src="https://dl.dropboxusercontent.com/u/35853519/apple.jpg" alt="Apple news" />
                        <div class="zakzeks-share">
                            <div class="number"><i class="flaticon-social19"></i>عدد الزقزقات 17</div>

                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div> <!-- End of news -->