浮动一个或两个内部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允许浮动的宽度，和空白等设置正确。

在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>

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

我的方法:

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