Question

我整理了一个简单的系统，以便我父亲可以为他的俱乐部排球队管理一个网站。他对html标记不是很熟悉所以我试图尽可能简单地保持这个标记。这就是我现在拥有的东西：

<div class="text_block">
    <h2>section heading</h2>
    <image src="" />  <- optional image
    <p> </p>
    <p></p> 
    <p></p> 
    <p></p> 
</div>

使用以下css规则：

.text_block {
padding : 1em 0;
min-height : 300px;
}
.text_block img {
float : left;
padding : 0 25px 15px 0;
}
.text_block p {
text-align : justify;
padding : 0 1.5em;
}

没有包装器div上的min-height声明我会像这样混淆：

Messy paragraphs http://img.skitch.com/20100801-dcb4x7uw41gkn48x1fdahys994.jpg

因为某些图像的div换行中没有太多文字。

当我包含最小高度元素时，我们会在有小段落且没有图像的情况下获得较大的间隙。最糟糕的情况我可以让他将“text_block”div标记为带有图像的人的“text_block has_image”，但我希望尽可能简单。

任何人都可以帮我解决这个问题吗？非常感谢。

Answer 1

使用text_block类的clear属性：

.text_block { clear: both; }

Answer 2

您的.text_block不是clearing the floats，请设置overflow:hidden; zoom:1;并删除最小高度。这应该让你直截了当。

您也可以设置clear:both;，以便清除上面的浮动。我之所以选择前者，是因为当你检查这个元素时，由于它正在清理自己的尺寸/检查工具（Firebug等）的边界看起来“正确”。当然，视觉上并不重要，但我喜欢这样。

Answer 3

问题是，由于你的容器div没有浮动，当p标签没有占用足够的空间时，它会被图像推翻。

你也可以浮动容器div以使一切都留在里面（虽然这可能会给你一些包含你的容器div的问题）

另一种选择是在每个容器的末尾添加一些清算div

div.clear {
  float:none;
  clear:both;
  }

浮动图像的Div不能正确排列

3 个答案: