Question

嗨，有人可以帮我这个。我有：

<html>
<body>
<div style="width=100%">
    <div style="float:left; background-color:Red; height:100px">Red</div>
    <div style="background-color:Green;">Green</div>
    <div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>

这给了我我想要的东西，左边是一个红色div，旁边有一个绿色div，占据了宽度的其余部分，红色旁边有一个黄色div但是在绿色div下面。

然而，父div实际上也必须向左浮动，即

<html>
    <body>
         <div style="width=100%; float:left">
              <div style="float:left; background-color:Red; height:100px">Red</div>
              <div style="background-color:Green;">Green</div>
              <div style="background-color:Yellow;">Yellow</div>
         </div>
    </body>
</html>

这打破了它。有没有办法让它再次运行父div div？

Answer 1

如果你浮动父div，为了将它们全部保存在父容器中，你还必须将它们全部浮动。那些没有漂浮的人会掉出来。

编辑：请注意，一旦浮动它们，宽度：100％就意味着什么，因为元素不知道对齐100％的宽度。可能必须给它一些固定的宽度，或者使用JQuery从文档中获取宽度。

http://jsfiddle.net/robx/cpFUV/

Answer 2

它打破了它，因为div通常设置为其父容器的宽度为100％。设置float:left会将宽度设置为内容的宽度。在父容器上设置宽度，它应该修复它。

Answer 3

您写了width=100%而不是width:100% - 修复示例：

<html>
    <body>
         <div style="float:left;width:100%;">
              <div style="float:left; background-color:Red; height:100px;">Red</div>
              <div style="background-color:Green;">Green</div>
              <div style="background-color:Yellow;">Yellow</div>
         </div>
    </body>
</html>

它最初工作的原因是块元素的隐式宽度为100％，但是通过添加div使您的float成为内联元素（排序）（例如div的宽度恢复为内容的宽度，就像您的红色div正常工作一样。）

您的width=100%始终被忽略，因此通过放置width:100%原样，您指定了元素的宽度，一切都很好。

示例：http://jsfiddle.net/hwb4w/

两个div相互徘徊，第二个必须占据剩下的线

3 个答案: