添加浮动:左;属性在两个div。 添加显示:inline-block;财产。 添加显示:flex;属性。

浮动一个或两个内部div。

浮动一个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

或者如果你浮动两个，你需要鼓励包装器div包含两个浮动的子元素，否则它会认为它是空的，不会在它们周围设置边框

浮动两个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

尝试使用flexbox模型。写起来既简单又简短。

现场杰斯菲德尔

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

默认方向为行。因此，它们在#包装器中彼此对齐。 但它不支持IE9或更低版本

你可以使用CSS float属性将元素放在一起:

#first {
float: left;
}
#second {
float: left;
}

你需要确保包装div允许浮动的宽度，和空白等设置正确。

我的方法:

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

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

尝试使用下面的代码更改来将两个div放在彼此前面

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle link