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

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

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

当前回答

.container { 宽度:100%; 显示:表; vertical-align:中间; ｝ .left { 宽度:100%; 显示:表格单元; text-align:中心; ｝铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; ｝ < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div

试试这个。这对我很管用。

2015-10-09 14:27:39

其他回答

@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提供正确的宽度。此外，表格将接收正确的宽度，并填充可用的剩余宽度。

我尝试了上面的一些其他解决方案，它们在某些边缘情况下并不完全有效，而且太复杂了，无法进行修复。这很有效，也很简单。

如果有任何问题或顾虑，请尽管提出来。

2012-04-18 23:24:36

如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

2016-11-17 16:32:31

使用显示: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>

2016-12-21 13:45:04

这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度: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

我有一个非常简单的解决办法! / / HTML

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

/ / CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

链接:http://jsfiddle.net/MHeqG/

2015-05-22 04:46:00

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

推荐文章

最新文章

标签