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

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

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

下面是解决方案:

#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/

在material UI和react.js中，你可以使用网格

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>

这很简单 你可以来点硬的

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

or the easy way #wrapper { display: flex; border: 1px solid black; } #first { 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>

还有很多其他的方法。 但我要用简单的方法。 我还想告诉你，这里有很多答案是不正确的 但我所展示的两种方法至少在HTML 5中都有效。

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

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

JSFiddle link

有两个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。