考虑下面的代码:

#wrapper { width: 500px; 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在包装器div中彼此相邻。在这种情况下,绿色div的高度应该决定包装器的高度。

我如何通过CSS实现这一点?


当前回答

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

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

JSFiddle link

其他回答

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

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

JSFiddle link

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

现场杰斯菲德尔

CSS:

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

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

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

这是正确的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>

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

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

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