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

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

JSFiddle link

下面是解决方案:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

你的演示版本更新了;

http://jsfiddle.net/dqC8t/1/

这是正确的CSS3答案。希望这能对你有所帮助 我真的很推荐你去看这本书:https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863其实我现在已经通过看这本书做出了这个解决方案。: D

#wrapper{ display: flex; flex-direction: row; border: 1px solid black; } #first{ width: 300px; border: 1px solid red; } #second{ border: 1px solid green; } <div id="wrapper"> <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div> <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div> </div>

有两个div，你也可以使用display属性:

#包装{ 边框:1px纯蓝色; ｝ # div1 { 显示:inline-block; 宽度:120 px; 身高:120 px; 边框:1px纯红色; ｝ # div2 { 显示:inline-block; 宽度:160 px; 身高:160 px; 边框:1px纯绿色; ｝ < div id = "包装" > <div id="div1">这两个div是</div> <div id="div2">相邻 < / div >

如果div1超过了一定的高度，则div2将被放置在底部的div1旁边。要解决这个问题，请使用vertical-align:top;div2。

#包装{ 边框:1px纯蓝色; ｝ # div1 { 显示:inline-block; 宽度:120 px; 身高:120 px; 边框:1px纯红色; ｝ # div2 { vertical-align:最高; 显示:inline-block; 宽度:160 px; 身高:160 px; 边框:1px纯绿色; ｝ < div id = "包装" > < div id = " div1 " >两个div < br / > < br / > < br / > < br / > < br / > < br / > < / div > <div id="div2">相邻 < / div >

jsFiddle为例1。

jsFiddle为例2。

选项1

在两个div元素上使用float:left，并为两个div元素设置% width，总宽度之和为100%。

使用box-sizing: border-box;在浮动div元素上。值border-box强制填充和边框为宽度和高度，而不是展开填充和边框。

在<div id="wrapper">上使用clearfix清除浮动子元素，这将使包装器div缩放到正确的高度。

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

选项2

使用位置:在一个元素上是绝对的，在另一个元素上是固定的宽度。

添加位置:相对于<div id="wrapper">元素，使子元素绝对位于<div id="wrapper">元素。

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

选项3

在两个div元素上使用display:inline-block，并为两个div元素设置% width，总宽度之和为100%。

再次(与float:left示例相同)使用box-sizing: border-box;在div元素上。值border-box强制填充和边框为宽度和高度，而不是展开填充和边框。

注意:内联块元素可能有空格问题，因为它受到HTML标记中的空格的影响。更多信息请访问:https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

最后一个选项是使用名为flex的新显示选项，但请注意浏览器兼容性可能会起作用:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

我的方法:

<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;
}