Question

亲爱的社区成员，

我实际上对CSS有点新意，但经过两周的学习后，我知道了。但是目前我的图层（div-tags）有一个小问题，我似乎无法修复。问题如下，我创建了以下内容来演示我的问题。

<body style="margin: 0;">
  <div style="margin: 0px auto; width: 960px;" id="main">
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
      Hello World
    </div>
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
      Hello next World!
    </div>
  </div>
</body>

这里的问题是，如果你“看看边框”（我已经删除;背景颜色和边框属性以增加代码的可读性），你会发现第一个主div不包围div一，二。如果我想修复它，我只需要在主层添加一些内容。产生以下代码：

<body style="margin: 0;">
  <div style="margin: 0px auto; width: 960px;" id="main">
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
      Hello World
    </div>
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
      Hello next World!
    </div>
  LET ME SOLVE IT!
  </div>
</body>

现在的问题是，如何在不向主图层添加“仅内容”的情况下获得最后的结果？

非常感谢您阅读我的问题并回答它！

有关图片，请参阅：http://www4.picturepush.com/photo/a/7808622/img/7808622.png和http://www3.picturepush.com/photo/a/7808636/img/7808636.png

（注意：所有都是直接链接;））

Answer 1

添加溢出：隐藏到您的容器div。这将迫使div“包裹”你的内部div。欢迎来到Stack Overflow！

Answer 2

雪花
添加一个清晰的div，将它作为包装内的最后一个div。另外，如果您的包装有固定的宽度，请避免使用宽度百分比，然后使用固定宽度作为内部div。希望这有帮助！

将图层放置在图层内，包装器不会缠绕其他包含的图层

2 个答案: