如何让一个div填充剩余的水平空间?

我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航

当前回答

最简单的解决方法是使用保证金。这也将是响应!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

2019-11-08 20:38:55

其他回答

我尝试了上面的解决方案，左边是液体，右边是固定的，但它们都不起作用(我知道这个问题是相反的，但我认为这是相关的)。以下是行之有效的方法:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

2012-11-23 14:49:00

我想知道为什么没有人把position: absolute和position: relative放在一起使用

所以，另一个解决方案是:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle例子

2016-02-16 08:13:48

物品和容器的规则;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

使用空白:nowrap;为最后一项的文本进行解构。

项目X% |项目Y% |项目Z%

总长度总是= 100%!

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;
...

}

2019-02-24 01:49:24

这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度:100%;带溢出:隐藏;如果有人不知道的话，这是个棘手的解决方案。

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[编辑]还有一个三列布局的例子: http://jsfiddle.net/MHeqG/3148/

2015-10-04 15:05:30

这似乎达到了你想要的效果。

#{离开浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >

2009-06-23 14:35:14

如何让一个div填充剩余的水平空间?

推荐文章

最新文章

标签