CSS布局问题，浮动，嵌套div [英] CSS layout problems, floats, nested divs

问题描述

好的，我已经收到一些关于这个个人网站的有用信息。在我混乱的一团糟的嵌套div中，我为自己创造了一些问题。我把这个图像和文本旁边的文本浮动在另一个div和中心的div，这是罚款。但是为了在它下面开始一个新的段落，我必须把该段落在一个div中，因为它上面的浮动块需要清除（或者显示在div旁边的右边缘中的文本）。我相信有一个更容易的方式做我想做的。如果有人可能可以看看我的代码，看看我在错误结构明智，这将是一个很大的帮助...非常感谢。

Alright, I have received some helpful information on this personal site I am working on already. Somewhere in my jumbled mess of nested divs I have created some problems for myself. I have floated both that image and the text next to it inside another div and centered that div, which is fine. But in order to start a new paragraph below it, I must put that paragraph within a div because the floats above it need to be cleared(or it displays the text in that right margin next to the div). I am sure there is an easier way of doing what I want to do. If someone might be able to take a look at my code and see where I am going wrong structure wise it would be a great help...thanks a lot.

你可以看到，有一个标题，说最近的工作正在集中，因为它是应该的，但它不是通常的边距上面的框中给出。

As you can see, there heading that says "Recent Work" is being centered like it is supposed to but it is not being given the usually margin from that box above it.

以下是链接：

http://danberinger.com/

推荐答案

问题是 intro_container 它的孩子的全高度。您将通过在浮动的2个div后面放置一个清除样式的元素来获得所需的效果：

The problem is that intro_container does not take the full height of its children. You will get the desired effect by putting an element with the clear style set after the 2 divs you are floating:

<div id="intro_container">

  <div id="messagebox">
    ...
  </div>

  <div id="picture">
    ...
  </div>

  <div style="clear: both"></div>
</div>

这将给最近工作的正常填充。

This will give "Recent Work" the normal padding.

这篇关于CSS布局问题，浮动，嵌套div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！