我有2个div:一个在左边,一个在右边。左边的宽度是固定的,我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; } #{导航 宽度:780 px; 浮:左; background - color: # A53030; } < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
我有2个div:一个在左边,一个在右边。左边的宽度是固定的,我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; } #{导航 宽度:780 px; 浮:左; background - color: # A53030; } < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; } #{正确 宽度:100%; background - color: # 00 ff00; } < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >
其他回答
使用显示:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
Boushley的答案似乎是使用浮动来安排这一过程的最佳方法。然而,它也不是没有问题。展开元素中的嵌套浮动将不可用;它会破坏页面。
当涉及到扩展元素时,所显示的方法基本上是“伪造”的——它实际上并不是浮动的,它只是使用其边缘来处理固定宽度的浮动元素。
问题就在于:展开的元素不是浮动的。如果你尝试在展开元素中有任何嵌套的浮动,这些“嵌套的”浮动项根本就不是嵌套的;当你试图坚持明确:两者;在“嵌套”浮动项下,最终也会清除顶级浮动。
然后,为了使用Boushley的解决方案,我想添加一个div,如下所示: .fakeFloat { 高度:100%; 宽度:100%; 浮:左; } 并将其直接放置在展开的div中;所有展开的div的内容都应该在这个fakfloat元素中。
出于这个原因,我建议在这种特定情况下使用表。浮动元素实际上并不是为执行您想要的展开而设计的,而使用表的解决方案则是微不足道的。有一种说法是,浮动更适合布局,而不是表格。但无论如何,你并没有在这里使用float,你是在假装它——在我看来,这在某种程度上违背了这种特定情况下风格论证的目的。
我也遇到过类似的问题,并想出了以下行之有效的方法
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
这个方法不会在窗口收缩时自动换行,但会自动展开“内容”区域。它将为站点菜单(左)保持一个静态宽度。
以及自动展开内容框和左侧垂直框(站点菜单)的演示:
https://jsfiddle.net/tidan/332a6qte/
物品和容器的规则;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
使用空白:nowrap;为最后一项的文本进行解构。
项目X% |项目Y% |项目Z%
总长度总是= 100%!
if
Item X=50%
Item Y=10%
Item z=20%
然后
项目X = 70%
项目X占主导地位(在表格CSS布局中,第一项占主导地位)!
试着max-content;用于在容器中传播div的div内部属性:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
@Boushley的回答是最接近的,但是有一个问题没有解决,但已经指出了。右边的div取浏览器的整个宽度;内容采用预期的宽度。为了更好地看待这个问题:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
http://jsfiddle.net/79hpS/
内容在正确的位置(在Firefox中),但是宽度不正确。当子元素开始继承width时(例如,width: 100%的表),它们被赋予的宽度等于浏览器的宽度,导致它们溢出页面的右侧并创建一个水平滚动条(在Firefox中)或不浮动并向下推(在chrome中)。
您可以通过向右列添加overflow: hidden来轻松解决这个问题。这将为内容和div提供正确的宽度。此外,表格将接收正确的宽度,并填充可用的剩余宽度。
我尝试了上面的一些其他解决方案,它们在某些边缘情况下并不完全有效,而且太复杂了,无法进行修复。这很有效,也很简单。
如果有任何问题或顾虑,请尽管提出来。