我有类似的东西:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
两个花车都是必需的.我希望内容div填充整个屏幕减去菜单的100px.如果我不使用浮动,div就会完全扩展.但是如何在设置浮点数时设置它？如果我使用......
style=width:100%
然后内容div获取父级的大小,它是我也尝试过的主体或另一个div,因此它当然不适合菜单,然后显示如下.
mer*_*uro 137
希望我能正确理解你,看看这个: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>ala*_*ion 97
我发现这种做法最交叉兼容的方式并不是很明显.您需要从第二列中删除浮动,并应用于overflow:hidden它.虽然这似乎隐藏了任何超出div的内容,但它实际上会强制div保持在其父级内.
使用您的代码,这是一个如何完成它的示例:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
希望这对任何有这个问题的人都有用,这是我发现的最适合我正在构建的网站,试图让它适应其他分辨率.不幸的是,如果你div在内容之后包含一个右浮动,如果有人知道一个好的方法让它工作,具有良好的IE兼容性,这不起作用,我会很高兴听到它.
display: flex;既然Flexbox模型的应用相当广泛,我实际上建议使用它,因为它允许更flex灵活的布局.这是一个像原版一样简单的两列:
<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>
Wil*_*ilt 30
.content .right{
overflow: auto;
background-color: red;
}
为Merkuro +1,但如果浮动的大小改变,你的固定余量将失败.如果你在右边的CSS上面使用div它,它会很好地改变大小,左边浮动的大小会改变.它有点灵活.查看小提琴:http://jsfiddle.net/9ZHBK/144/
浮动的元素将从正常流布局中取出,块元素(如DIV)不再跨越其父级的宽度.在这种情况下规则发生了变化.不要重新发明轮子,请查看此站点以获取一些可能的解决方案,以创建您所追求的两个列布局:http://www.maxdesign.com.au/presentation/page_layouts/
具体而言,"液体双柱布局".
干杯!
小智 5
这种用法可能会解决您的问题。
width: calc(100% - 100px);
width: calc(100% - 100px);