Html 清除某个div下的所有元素

我正在制作一个新闻提要，我面临以下问题： 我想清除阿凡达下的所有项目，因此没有包装文本或下面的任何内容

此图显示问题：

我希望它是这样的（用Photoshop制作）：

守则：

.news.news item.avatar{
背景图像：url（“https://dl.dropboxusercontent.com/u/35853519/zakzek.png");
宽度：55px；
高度：55px；
背景尺寸：封面；
浮动：对；
左边距：15px；
显示：块；
}

JSFIDLE（请参阅全屏以获得更好的视图）：

谢谢，

追加保证金

.meta{
margin-right: 70px;
}

或者添加填充物

.meta{
padding-right: 70px;
}

或者使用转换

追加保证金

.meta{
margin-right: 70px;
}

或者添加填充物

.meta{
padding-right: 70px;
}

---

或者在不改变HTML结构的情况下使用transform，实现这一点的一种方法是使用CSS在meta content div上添加边距。像这样：

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

---

那会把所有东西移到左边。只需使边距大于您的头像图像宽度，就不会有任何包装。

在不改变HTML结构的情况下，实现这一点的一种方法是使用CSS在meta content div上添加边距。像这样：

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

---

那会把所有东西移到左边。只需使边距大于您的化身图像宽度，就不会有任何包装。

将属性

显示给化身和h2元素：inline block

就可以了，还可以为h2元素设置

宽度

将属性
display:inline block
赋予化身和h2元素将起作用，同时为h2元素设置
宽度

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

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


㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶫
لندن - "القدس" - كشف مصدر من شركة اتصالات اميركية أن الطلب المسبق على هاتف "أبل" الجديد "آيفون 5 سي" ليس "هائلاً" كما أن حجم المعروض منه ومن النسخة الأعلى سعراً جاء مخيباً للآمال. كشفت "أبل" الأسبوع الماضي النقاب عن أحدث طرازين...
عدد الزقزقات 17
您可以使用一个表格，将头像放在一列，其他内容放在第二列，如下所示：

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


㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶪㶫
لندن - "القدس" - كشف مصدر من شركة اتصالات اميركية أن الطلب المسبق على هاتف "أبل" الجديد "آيفون 5 سي" ليس "هائلاً" كما أن حجم المعروض منه ومن النسخة الأعلى سعراً جاء مخيباً للآمال. كشفت "أبل" الأسبوع الماضي النقاب عن أحدث طرازين...
عدد الزقزقات 17
如果是关于处理浮点，则
溢出：隐藏规则很好

它显示了浮动元素所在的元素，浮动元素在文档流中的位置与在文档流中的位置相同


关于布局：）
同样触发它：/
内联块
/
flex
和
浮点
如果是关于处理浮点，则
溢出：隐藏规则很好

它显示了浮动元素所在的元素，浮动元素在文档流中的位置与在文档流中的位置相同


关于布局：）
它也会触发：/
内联块
/
flex
和
float
图像对我不起作用@菲利浦：请试试这些：图像对我不起作用@菲利浦：请试试这些，谢谢！我们可以通过改变化身的显示属性来做同样的事情吗？我尝试使用内联块，但它不起作用。边距属性会将文本从页面边缘偏移多少像素。内联块属性将消除换行，但将文本移动到化身下。因此，您使用的属性取决于您希望内容的显示方式。谢谢！我们可以通过改变化身的显示属性来做同样的事情吗？我尝试使用内联块，但它不起作用。边距属性会将文本从页面边缘偏移多少像素。内联块属性将消除换行，但将文本移动到化身下。因此，您使用的属性取决于您希望内容的显示方式。谢谢！那下面的图片和文字呢？我们如何才能获得相同的结果在这种情况下，我会将其划分为列，如下所示：只是在化身周围有一个包装器，并将其设置为显示：inline block；一定高度，谢谢！那下面的图片和文字呢？我们如何才能获得相同的结果在这种情况下，我会将其划分为列，如下所示：只是在化身周围有一个包装器，并将其设置为显示：inline block；一定的高度,，