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

HI, can someone please help me with this. I have:

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

<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>

Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.

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

However the parent div actually has to also float left ie.

然而，父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>

This breaks it. Is there a way to get it working again with the parent div float left?

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

3 个解决方案

#1

if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.

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

Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.

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

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

#2

It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.

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

#3

You wrote width=100% instead of width:100% - fixed example:

您写的宽度= 100％而不是宽度：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>

The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).

它最初工作的原因是，块元素的隐式宽度为100％，但是通过添加浮点数使得div成为内联元素（排序）（这样div的宽度恢复为内容的宽度），就像你的Red div一样）。

Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.

你的宽度= 100％总是被忽略，所以通过设置宽度：100％，你要指定元素的宽度，一切都很好。

Example: http://jsfiddle.net/hwb4w/

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

#1