我有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 >导航
当前回答
现在,您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
其他回答
@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提供正确的宽度。此外,表格将接收正确的宽度,并填充可用的剩余宽度。
我尝试了上面的一些其他解决方案,它们在某些边缘情况下并不完全有效,而且太复杂了,无法进行修复。这很有效,也很简单。
如果有任何问题或顾虑,请尽管提出来。
如果您试图填充flexbox中2项之间的剩余空间,请将以下类添加到您想要分离的2项之间的空div:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
如果有人需要相同的解决方案,但没有固定长度的左div:
如果你想让左边的div占据所有的空间,你可以删除固定大小的180px。参见下面的CSS:
#left {
float: left;
background-color: red;
}
#right {
background-color: yellow;
flex-grow: 1
}
参见这里的JSFiddle: JSFiddle -div-space
最简单的解决方案是让左边div的宽度等于100% -右边div的宽度加上它们之间的任何边距。
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
https://codepen.io/tamjk/pen/dybqKBN
由于这是一个相当流行的问题,我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
在这种情况下,overflow: auto触发上下文行为,并使右元素仅扩展到可用的剩余宽度,如果.left消失,它将自然扩展到全宽度。对于许多UI布局来说,这是一个非常有用和干净的技巧,但一开始可能很难理解“为什么它有效”。