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

Question

我正在做一个新闻提要，我面对的是:我想清除头像下的所有项目，所以下面没有包装的文本或任何东西。

这张图片显示了这个问题：

我希望它是这样(用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/

谢谢,

Answer 1

如果是关于处理浮点数，那么overflow:hidden;规则就很好了。

它显示的元素中，float元素在文档流中所处的位置比放在一边的元素更多，时间也更早。

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

.meta {
    overflow:hidden;
}

它是关于布局的:)触发它也是这样：display:table/inline-block/flex和float。

Answer 2

演示

加边距

.meta{
margin-right: 70px;
}

演示

或添加填充物

.meta{
padding-right: 70px;
}

或使用变换

Answer 3

在不改变HTML结构的情况下，实现这一目标的一种方法是在带有CSS的元内容div上添加一个边距。就像这样：

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

它会把所有东西都移到左边。只要使边缘大于你的头像宽度，就不会有任何包装。