您可以使用flexbox布局您的项目:

#{母公司 显示:flex; ｝ #{狭窄 宽度:200 px; 背景:lightblue; /*这样就可以看到*/ ｝ #{宽 flex: 1; /*扩展到容器的其余部分*/ 背景:lightgreen; /*这样就可以看到*/ ｝ < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

这基本上只是flexbox的表面。Flexbox可以做一些非常了不起的事情。

对于老式浏览器的支持，你可以使用CSS float和width属性来解决这个问题。

#{狭窄 浮:正确; 宽度:200 px; 背景:lightblue; } #{宽 浮:左; 宽度:calc(100% - 200px); 背景:lightgreen; } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

不幸的是，对于一般情况，这不是一个简单的问题。最简单的方法是添加一个css风格的属性“float: right;”到你的200px div，然而，这也会导致你的“main”-div实际上是全宽的，其中的任何文本都会漂浮在200px-div的边缘，这通常看起来很奇怪，这取决于内容(几乎在所有情况下，除非它是一个浮动图像)。

编辑: 正如Dom所建议的，包装问题当然可以用边缘来解决。愚蠢的我。

我不知道这是否是当前的问题，但我刚刚遇到了同样的问题，并使用CSS显示:内联块;标签。 将它们包装在div中，以便它们可以适当地放置。

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

请注意，inline style属性的使用只是为了简化这个示例，当然这些属性会被移动到外部CSS文件中。

您可以使用flexbox布局您的项目:

#{母公司 显示:flex; ｝ #{狭窄 宽度:200 px; 背景:lightblue; /*这样就可以看到*/ ｝ #{宽 flex: 1; /*扩展到容器的其余部分*/ 背景:lightgreen; /*这样就可以看到*/ ｝ < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

这基本上只是flexbox的表面。Flexbox可以做一些非常了不起的事情。

对于老式浏览器的支持，你可以使用CSS float和width属性来解决这个问题。

#{狭窄 浮:正确; 宽度:200 px; 背景:lightblue; } #{宽 浮:左; 宽度:calc(100% - 200px); 背景:lightgreen; } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

我混合使用float和overflow-x:hidden。最少的代码，总是有效的。

https://jsfiddle.net/9934sc4d/4/ -加上你不需要清除你的浮动!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

我遇到了同样的问题，Mohits版本的工作。如果你想在html中保持你的左右顺序，试试这个。在我的例子中，左边的div正在调整大小，右边的div保持宽度260px。

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

诀窍是在主框上使用右填充，但通过再次使用右边距放置右框来再次使用该空间。