如何把两个潜水器放在一起?

考虑下面的代码:

#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实现这一点?

当前回答

下面是解决方案:

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

2011-04-27 11:11:05

其他回答

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

2020-02-22 16:55:56

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

2016-06-16 11:09:26

我的方法:

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

2019-11-03 10:17:36

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

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

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

2011-04-27 11:06:40

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

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

JSFiddle link

2015-12-08 13:30:55

如何把两个潜水器放在一起?

推荐文章

最新文章

标签