如何将div并排放置

给第一个div左浮动并固定，第二个div 100％宽度左移。这应该够了吧。如果要在其下面放置物品，则需要清除：在要放置在下面的物品上

CSS3引入了弹性盒（也称为弹性盒），它也可以实现此行为。

只需定义第一个div的宽度，然后给第二个div赋予一个flex-grow值1即可使其填充父级的剩余宽度。

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

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

jsFiddle演示

请注意，弹性框与旧版浏览器不向后兼容，但对于定位现代浏览器来说是一个不错的选择（另请参见Caniuse和MDN）。CSS Tricks上提供了有关如何使用弹性框的详尽综合指南。

<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的宽度

您可以使用CSS网格来实现此目的，这是用于说明目的的简化版本：

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

或更传统的使用float和margin的方法。

在此示例中，我包括了背景色，以帮助显示事物的位置以及浮动区域下方内容的处理方式。

不要将样式嵌入现实生活中，而是将其提取到样式表中。

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

有很多方法可以满足您的要求：

1. 使用CSS float属性：

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. 使用CSS display属性 -可以使divs的行为类似于table：

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

有更多的方法，但是这两种是最流行的。