当float:left被设置时,将div扩展到最大宽度

我有这样的事情:

<div style="width:100px;float:left">menu</div> <div style="float:left">content</div> 

两个花车是必要的。 我希望内容div填充整个屏幕减去菜单的100px。 如果我不使用浮动的div扩大完全是因为它应该。 但是,如何设置浮动时设置? 如果我使用某物

 style=width:100% 

那么内容div得到的父母的大小,这是身体或另一个div我也试过,所以当然不适合菜单的权利,然后显示在下面。

希望我已经正确理解了你,看看这个: http : //jsfiddle.net/EAEKc/

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Content with Menu</title> <style> .content .left { float: left; width: 100px; background-color: green; } .content .right { margin-left: 100px; background-color: red; } </style> </head> <body> <div class="content"> <div class="left"> <p>Hi, Flo!</p> </div> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> </div> </div> </body> </html> 

我发现这样做的最相互交叉的方式并不是很明显。 你需要从第二列中删除float,并应用overflow:hidden 。 虽然这似乎隐藏了任何超出div的内容,但它实际上会迫使div保留在其父项中。

使用你的代码,这是一个如何完成的例子:

 <div style="width: 100px; float: left;">menu</div> <div style="overflow: hidden;">content</div> 

希望这对任何有这个问题的人都有用,这是我发现的作品最适合我正在build设的网站,试图让它适应其他决议。 不幸的是,如果在内容之后包含右浮动的div ,那么这是行不通的,如果有人知道一个好的方法来实现这个function,并且具有良好的IE兼容性,我会很高兴听到这个消息。

新的,更好的select使用display: flex;

既然Flexbox模型的实现相当广泛,我实际上推荐使用它,因为它允许更多的布局灵活性。 这是一个简单的双列像原来的:

 <div style="display: flex;"> <div style="width: 100px;">menu</div> <div style="flex: 1;">content</div> </div> 

这里有一个三列,宽度为中间的柱子!

 <div style="display: flex;"> <div style="width: 100px;">menu</div> <div style="flex:1;">content</div> <div style="width: 100px;">sidebar</div> </div> 

解决scheme没有固定您的利润大小

 .content .right{ overflow: auto; background-color: red; } 

Merkuro +1,但如果浮动的大小改变你的固定保证金将失败。 如果你在右边的div上使用上面的CSS,它会很好地改变左边浮动大小的大小。 这样更灵活一些。 检查小提琴在这里: http : //jsfiddle.net/9ZHBK/144/

浮动的元素从正常stream布局中取出,块元素(例如DIV)不再跨越父元素的宽度。 规则在这种情况下改变。 而不是重新发明轮子,看看这个网站的一些可能的解决scheme,以创build你在之后的两个列布局: http : //www.maxdesign.com.au/presentation/page_layouts/

具体而言,“液体两列布局”。

干杯!

并根据merkuro的解决scheme,如果你想最大化左边的一个,你应该使用:

 <!DOCTYPE html> <html lang="en"> <head> <meta "charset="UTF-8" /> <title>Content with Menu</title> <style> .content .left { margin-right: 100px; background-color: green; } .content .right { float: right; width: 100px; background-color: red; } </style> </head> <body> <div class="content"> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> </div> <div class="left"> <p>Hi, Flo!</p> </div> </div> </body> </html> 

还没有在IE浏览器上testing过,所以在IE上可能看起来破了。

如果有人感兴趣并且不喜欢“浮动”,这是HTML 5的更新解决scheme。

在这种情况下,表格可以很好地工作,因为您可以将固定宽度设置为表格和表格单元格。

 .content-container{ display: table; width: 300px; } .content .right{ display: table-cell; background-color:green; width: 100px; } 

来自@merkuro的http://jsfiddle.net/EAEKc/596/原始源代码;

接受的答案可能有效,但我不喜欢重叠利润的想法。 在HTML5中,你可以使用display: flex; 。 这是一个干净的解决scheme。 只需设置一个元素的宽度和flex-grow: 1; 为dynamic元素。 merkuros小提琴的编辑版本: https ://jsfiddle.net/EAEKc/1499/

您好右边元素溢出隐藏方法有一个简单的方法。

  .content .left { float:left; width:100px; background-color:green; } .content .right { overflow: hidden; background-color:red; } 
 <!DOCTYPE html> <html lang="en"> <head> <title>Content Menu</title> </head> <body> <div class="content"> <div class="left"> <p>Hi, Flo! I am Left</p> </div> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> <p> It done with overflow hidden and result is same.</p> </div> </div> </body> </html> 

这可能工作:

  div{ display:inline-block; width:100%; float:left; }