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

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

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

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

浮动一个或两个内部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 */
}

下面是解决方案:

#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/ < a href = " http://jsfiddle.net/dqC8t/1/ " > < / >

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

#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
}

<div id="wrapper">
<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>
</div>

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

#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
}
#div2 {
vertical-align:top;
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
}

<div id="wrapper">
<div id="div1">The two divs are<br/><br/><br/><br/><br/><br/></div>
<div id="div2">next to each other.</div>
</div>

jsFiddle为例1。

jsFiddle为例2。

选项1

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

在浮动div元素上使用box-sizing: border-box;。值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

在一个元素上使用position:absolute，在另一个元素上使用固定宽度。

添加position:相对于<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的例子一样)在div元素上使用box-sizing: border-box;。值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放在彼此前面

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

JSFiddle link

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

住Jsfiddle

CSS:

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

默认方向是行。因此，它们在#包装器中彼此对齐。 但不支持IE9或以下版本

1. 在两个div中添加float:left;属性。

2. 添加display:inline-block;属性。

3. 在父div中添加display:flex;属性。

这是正确的CSS3答案。希望这能对你有所帮助 我真的推荐你去读这本书:https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863实际上我已经从这本书中得到了这个解决方案。: D < / p >

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

这很简单 你可以用艰难的方式来做

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

或者简单的方法

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

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