如何将两个 div 并排放置？

Posted 2023-03-25

技术标签:

【中文标题】如何将两个 div 并排放置？【英文标题】：How to place two divs next to each other? 【发布时间】：2011-08-13 18:23:45 【问题描述】：

考虑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 的高度应该决定 wrapper 的高度。

如何通过 CSS 实现这一点？

【问题讨论】：

还有：***.com/questions/446060/… #wrapper display: flex; CSS two divs next to each other的可能重复 【参考方案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 包含浮动的孩子，否则它会认为它是空的并且没有在它们周围放置边框

浮动两个 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 元素）是的，在示例一中，如果 #first 更长，您当然可以 - 包含浮动 101 eh ;).. 隐藏在 #second 上的溢出避免了计算左边距的需要，否则解决方案基本一样没错！我不想计算保证金。 overflow: hidden 在这里做得很好！然而，它对我来说仍然是一种魔法。我认为overflow: hidden 应该隐藏不适合其容器的内容。但是，这里的行为有点不同。请您详细说明一下吗？ overflow 属性将清除垂直和水平浮动，这就是为什么在我的第一个示例中，#second 不需要左边距，只要它的值不是溢出属性就可以工作visible.. 对于那些以防万一的情况，我更喜欢隐藏而不是自动，因此滚动条不会意外生成（自动会这样做）.. 无论哪种方式，都不会隐藏任何内容，因为它只会是如果超出您的 500px 宽度，则隐藏，但只要没有高度，内容将正常包裹在宽度内.. 没有隐藏；） #wrapper 上的 overflow:hidden 用于垂直包含 #first 浮动，如果它比非浮动的 #second div 长。 #second 上的第二个溢出用于包含第一个浮动旁边的内容，否则它会在第一个浮动下方。溢出属性的扩展行为在 CSS2.1 的某个地方分阶段进行，规范本身发生了变化，以响应在没有清除元素或 clearfix hack 的情况下包含浮动的方式，它的技术术语是当这样使用时，它会创建一个新的块格式化上下文【参考方案2】：

有两个 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 for example 1.

jsFiddle for example 2.

【讨论】：

@BSeven 接受的答案使用 float 属性，该属性早于主要浏览器的 display 属性支持。 Chrome 从 v1.0 开始支持浮动，从 v4.0 开始支持显示。也许接受的答案在编写时更加向后兼容。这个解决方案有一个烦人的问题：因为divs 是inline，所以您必须在 html 中在它们之间保留任何空格、换行符等。否则，浏览器将在它们之间呈现一个空格。看到这个Fiddle：你不能设法让两个divs 在同一行，除非你把他们的标签放在中间没有任何东西。【参考方案3】：

您可以使用 CSS 浮动属性让元素彼此相邻：

#first 
float: left;

#second 
float: left;

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

【讨论】：

【参考方案4】：

尝试使用弹性盒模型。写起来简单又简短。

直播Jsfiddle

CSS：

#wrapper 
  display: flex;
  border: 1px solid black;

#first 
    border: 1px solid red;

#second 
    border: 1px solid green;

默认方向是行。因此，它在#wrapper 内彼此相邻对齐。但不支持IE9及以下版本

【讨论】：

【参考方案5】：

选项 1

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

添加 position:relative to <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 元素设置一个 % 宽度，总宽度为 100%。

再次（与 float:left 示例相同）在 div 元素上使用 box-sizing: border-box;。值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

【讨论】：

同意； float 不要让我的船浮起来。 inline-block 岩石。（对不起。）【参考方案6】：

解决办法如下：

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

【讨论】：

谢谢。如果我省略 overflow: auto; 它仍然有效。你能举个例子吗？是的，当然：删除溢出自动并使第一个的内容比第二个的内容长，你很清楚容器的大小只有在你设置溢出自动时才会适应，或者如果你使用了一个清除元素：jsfiddle.net/dqC8t/3 好的，我明白了，谢谢！但是，我不喜欢margin: 0 0 0 302px;，因为它依赖于width: 300px;。但是，无论如何，谢谢！如果为第二个 div 指定 i 宽度，则不需要它【参考方案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 link

【讨论】：

【参考方案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; 属性。

在父 div 中添加 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;

【讨论】：

干净简单。【参考方案12】：

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

【讨论】：

【参考方案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>

【讨论】：

以上是关于如何将两个 div 并排放置？的主要内容，如果未能解决你的问题，请参考以下文章

如何并排放置div

如何在 div 中并排放置图像？（wordpress）

如何将两个或多个元素并排放置并溢出？

如何缩放并排放置的两个图像？

ios - 如何使用ios swift中的自动布局以编程方式将两个标签并排放置在中心位置？

我如何将p标签放在两个div下？