我有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 >导航
当前回答
使用显示: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>
其他回答
/* * css * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/* * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
我也遇到过类似的问题,我在这里找到了解决方案: https://stackoverflow.com/a/16909141/3934886
解决方案是一个固定的中心div和液体边列。
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
如果你想要一个固定的左列,只需相应地改变公式。
您可以使用网格CSS属性,是最清晰,干净和直观的方式结构您的盒子。
#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; } #{固定 背景:红色; grid-column: 1; } 剩余# { 背景:绿色; grid-column: 2; } < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >
现在,您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; } #{正确 宽度:100%; background - color: # 00 ff00; } < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >