问答中心分类: CSS如何将两个 div 并排放置?
0
匿名用户 提问 1月 前

考虑以下代码

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.
    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 的高度应该决定包装器的高度。
我如何通过 CSS 实现这一点?

radek 回复 1月 前

#wrapper { display: flex; }

radek 回复 1月 前

可能的重复CSS 两个相邻的 div

12 Answers
0
jim_kastrin 回答 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在底部。要解决此问题,请使用vertical-align:top;div2.

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

jim_kastrin 回复 1月 前

@BSeven 接受的答案使用 float 属性,该属性早于主要浏览器的 display 属性支持。 Chrome 从 v1.0 开始支持浮动,从 v4.0 开始支持显示。也许接受的答案在编写时更加向后兼容。

Alexander Abakumov 回复 1月 前

这个解决方案有一个烦人的问题:因为divs 制作完成inline您必须在 HTML 中在它们之间保留任何空格、换行符等。否则,浏览器将在它们之间呈现一个空格。看到这个小提琴: 你不能同时保留两者divs 在同一行,除非你把他们的标签放在中间没有任何东西。

0
James 回答 1月 前

您可以使用 CSS 浮动属性将元素彼此相邻放置:

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

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

0
Md Rafee 回答 1月 前

尝试使用 flexbox 模型。写起来简单而简短。
居住提琴手
CSS:

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

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

0
Jako Basson 回答 1月 前

选项1
利用float:left双方div元素并为两个 div 元素设置一个 % 宽度,总宽度为 100%。
利用box-sizing: border-box;在浮动 div 元素上。值border-box 强制填充和边框进入宽度和高度,而不是扩展它。
在上使用 clearfix<div id="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示例)使用box-sizing: border-box;在 div 元素上。值border-box 强制填充和边框进入宽度和高度,而不是扩展它。
笔记:inline-block 元素可能存在间距问题,因为它受 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 回复 1月 前

同意;float不要让我的船浮起来。inline-block岩石。 (对不起。)

0
meo 回答 1月 前

这是解决方案:

#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 回复 1月 前

谢谢。如果我省略overflow: auto;它仍然有效。你能举个例子吗?

meo 回复 1月 前

是的,当然:删除溢出自动并使第一个的内容比第二个的内容长,你会看到容器的大小只有在你设置溢出自动时才会适应,或者如果你使用清除元素:jsfiddle.net/dqC8t/3

Misha Moroshko 回复 1月 前

好的,明白了,谢谢!然而,我不喜欢margin: 0 0 0 302px;因为它取决于width: 300px;.不过,还是谢谢!!

meo 回复 1月 前

如果您为第二个 div 指定 i 宽度,则不需要它