考虑下面的代码：




 #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实现此目标？

评论

另外：stackoverflow.com/questions/446060/…
#wrapper {display：flex; }
CSS两个div可能彼此相邻的重复副本

#1 楼

浮动一个或两个内部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包含两个浮动的子元素，否则会认为它是空的而不在其周围放置边框

#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上设置overflow：auto，这样大小仍将适合内容大小。 （不需要clear：both元素）

– meo
11年4月27日在11:09
是的，在示例一中，如果#first较长，则肯定可以-包含浮点数101 eh;）..隐藏在#second上的溢出避免了计算左裕度的需要，尽管否则解决方案基本上是相同的

– clairesuzy
11年4月27日在11:28
究竟！我不想计算保证金。溢出：隐藏在这里做得很好！但是，这对我来说仍然是一种魔力。我认为溢出：如果内容不适合其容器，则应该隐藏内容。但是，这里的行为有些不同。您能详细说明一下吗？

– Misha Moroshko
11年4月27日在11:37
overflow属性将清除水平和垂直方向的浮动，这就是为什么在我的第一个示例中，＃second不需要左页边距，只要它的值不可见，overflow属性就可以工作。在这种情况下，滚动条不是偶然生成的（自动会这样做）..两种方式都不会隐藏任何内容，因为只有当它超出您的500px宽度时，它才会被隐藏，但只要有没有高度的内容将正常包裹在宽度内。.没有隐藏;）

– clairesuzy
2011-4-27 11:43


溢出：隐藏在#wrapper中的功能是，如果它变得比非浮动的#second div长，则可以垂直包含#first的浮动。 #second上的第二次溢出用于将内容包含在第一个浮点数的旁边，否则将水平放置在第一个浮点数的下面。溢出属性的扩展行为在CSS2.1中的某个阶段中逐步执行，规范本身也进行了更改，以响应不包含清除元素或clearfix hack的包含浮点的方式，它的技术术语是当这样使用时，它会创建一个新的块格式化上下文

– clairesuzy
11年4月27日在12:35

#2 楼

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

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

评论

@BS即使接受的答案也使用float属性，该属性比主要浏览器的display属性更早支持。 Chrome支持从v1.0浮动和从v4.0显示。也许在撰写本文时，可接受的答案更加向后兼容。

– Jim_kastrin
16年5月27日在9:16
这个解决方案有一个烦人的问题：由于div是内联的，因此您必须在HTML中保持它们之间没有空格，新行等。否则，浏览器将在它们之间呈现一个空格。看这个小提琴：您无法设法将两个div保持在同一行，除非您将它们的标签放在中间。

–亚历山大·阿巴库莫夫（Alexander Abakumov）
16年5月31日在16:31

#3 楼

您可以使用CSS float属性将元素彼此相邻放置：

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


您需要确保wrapper div在以下方面允许浮动：宽度和边距等设置正确。

#4 楼

尝试使用flexbox模型。编写起来很容易而且简短。

实时Jsfiddle

CSS：

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


默认方向是行。因此，它在#wrapper中彼此对齐。
但不支持IE9或更低版本的IE9。

#5 楼

解决方法如下：

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

评论

谢谢。如果我忽略溢出：自动；它仍然有效。您可以举一个需要它的例子吗？

– Misha Moroshko
2011年4月27日在11:19
是的，可以肯定的是：删除overflow auto，将第一个的内容加长，然后再设置seconds的内容，您会很好地看到容器的大小仅在您对其设置了overflow auto或使用清除元素：jsfiddle时才适应。净/ dqC8t / 3

– meo
2011-4-27 11:21


好，我明白了，谢谢！但是，我不喜欢保证金：0 0 0 302px;因为它取决于宽度：300px;。但是，还是谢谢！！

– Misha Moroshko
2011年4月27日在11:33
如果您为第二个div指定i宽度，则不需要

– meo
2011年4月27日在12:57

#6 楼

选项1

在两个float:left元素上都使用div，并为两个div元素设置一个％宽度，总宽度为100％。

在浮动div元素上使用box-sizing: border-box;。值border-box会强制填充和边框达到宽度和高度，而不是扩展它。

在<div id="wrapper">上使用clearfix清除浮动子元素，这将使wrapper 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

评论

同意；浮不浮我的船。直列块状岩石。 （抱歉。）

– SteveCinq
17 Mar 16 '17 2:41

#7 楼

非常简单-
您可以用困难的方式做到




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

#8 楼

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

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


JSFiddle链接

#9 楼

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




#10 楼


在两个div中添加float:left;属性。
添加display:inline-block;属性。
在父级中添加display:flex;属性。


#11 楼

我的方法：

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


评论

干净简单。

–海滩屋
10月14日13:29

#12 楼

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


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

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