如何将两个div放在一起?

时间:2011-04-27 11:04:30

标签: css html

考虑following code

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

13 个答案:

答案 0 :(得分:400)

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

答案 1 :(得分:107)

有两个div,

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

你也可以使用display属性:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle示例here

如果div1超过某个高度,div2将放在底部的div1旁边。要解决此问题,请在vertical-align:top;上使用div2

jsFiddle示例here

答案 2 :(得分:28)

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

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

您需要确保包装器div允许浮动宽度,并且边距等设置正确。

答案 3 :(得分:16)

这是解决方案:

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

答案 4 :(得分:15)

选项1

float:left元素上使用div,并为两个div元素设置%宽度,总宽度为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,在另一个元素上使用固定宽度。

添加位置:相对于<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

display:inline-block元素上使用div,并为两个div元素设置%宽度,总宽度为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

答案 5 :(得分:14)

尝试使用flexbox模型。写作简单易行。

直播Jsfiddle

CSS:

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

默认方向是行。因此,它在#wrapper中彼此相邻排列。 但它不支持IE9或低于该版本

答案 6 :(得分:6)

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

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

JSFiddle link

答案 7 :(得分:3)

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

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

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

答案 8 :(得分:2)

这很容易- 你可以用困难的方式完成

.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中使用。

答案 9 :(得分:1)

在材料界面和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>

答案 10 :(得分:0)

&#13;
&#13;
#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 11 :(得分:0)

这是正确的CSS3答案。希望这对你现在有所帮助:D 我真的建议你阅读这本书: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>

答案 12 :(得分:0)

我的方法:

# Import os to set the environment variable CUDA_VISIBLE_DEVICES
import os
import tensorflow as tf
import GPUtil

# Set CUDA_DEVICE_ORDER so the IDs assigned by CUDA match those from nvidia-smi
os.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID"

# Get the first available GPU
DEVICE_ID_LIST = GPUtil.getFirstAvailable()
DEVICE_ID = DEVICE_ID_LIST[0] # grab first element from list

# Set CUDA_VISIBLE_DEVICES to mask out all other GPUs than the first available device id
os.environ["CUDA_VISIBLE_DEVICES"] = str(DEVICE_ID)

# Since all other GPUs are masked out, the first available GPU will now be identified as GPU:0
device = '/gpu:0'
print('Device ID (unmasked): ' + str(DEVICE_ID))
print('Device ID (masked): ' + str(0))

# Run a minimum working example on the selected GPU
# Start a session
with tf.Session() as sess:
    # Select the device
    with tf.device(device):
        # Declare two numbers and add them together in TensorFlow
        a = tf.constant(12)
        b = tf.constant(30)
        result = sess.run(a+b)
        print('a+b=' + str(result))

CSS:

<div class="left">Left</div>
<div class="right">Right</div>