我正在处理新闻Feed,我遇到了以下问题: 我想清除头像下的所有项目,因此下面没有包装文本或任何内容。
此图显示问题:
我希望它像这样(用Photoshop制作):
代码:
.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/
谢谢,
答案 0 :(得分:1)
答案 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
/ flex
,float
也是如此。
答案 3 :(得分:0)
为头像和h2元素提供属性display: inline-block
将会起作用,同时为h2元素设置width
。
答案 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 -->