赋予第一个div float: left;和一个固定宽度，并给第二个div宽度:100%;和浮动:左;。这样应该可以了。如果你想把项目放在下面，你需要明确:both;在你想要放在它下面的项目上。

赋予第一个div float: left;和一个固定宽度，并给第二个div宽度:100%;和浮动:左;。这样应该可以了。如果你想把项目放在下面，你需要明确:both;在你想要放在它下面的项目上。

CSS3引入了灵活的盒子。Flex box)也可以实现这种行为。

简单地定义第一个div的宽度，然后给第二个div一个弹性增长值1，这将允许它填充父div的剩余宽度。

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

演示:

div { 颜色:# fff; font-family: Tahoma, Verdana, Segoe, sans-serif; 填充:10 px; ｝ .container { background - color: # 2 e4272; 显示:flex; ｝ .fixed { background - color: # 4 f628e; 宽度:200 px; ｝ .flex-item { background - color: # 7887 ab; flex-grow: 1; ｝ < div class = "容器" > <div class="fixed">固定宽度</div> <div class="flex-item">动态大小的内容 < / div >

请注意，伸缩盒不向后兼容旧浏览器，但对于针对现代浏览器是一个很好的选择(参见Caniuse和MDN)。在CSS Tricks上有一个关于如何使用伸缩盒的非常全面的指南。

如果你没有标记IE6，那么浮动第二个<div>，并给它一个等同于(或者可能比第一个<div>的固定宽度大一点)的边距。

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

空白说明了'rest-of-space' <div>可能包含比'fixed-width' <div>更多的内容。

不要给固定宽度的图片设置背景;如果你需要明显地看到这些不同的“列”，那么使用人造列的技巧。

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

这将是跨浏览器兼容的。如果没有左边边距，如果你的内容比你的边栏长，你就会遇到内容一直跑到左边的问题。

我不太了解HTML和CSS设计策略，但如果你正在寻找一些简单的东西，可以自动适应屏幕(就像我一样)，我相信最直接的解决方案是让div表现为段落中的文字。尝试指定display: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

您可能需要也可能不需要指定div的宽度