如何在 HTML 中将三个 div 并排放置？ [复制]答案

【问题标题】：How to put three divs next to each other in HTML? [duplicate]如何在 HTML 中将三个 div 并排放置？ [复制]
【发布时间】：2016-02-17 15:00:26
【问题描述】：

您好，我正在尝试显示 3 个彼此内联的 div 元素，即使您更改浏览器的大小也不会调整大小，我该怎么做？

它应该是什么样子：

代码：

body {}

#wrap {
    width: auto;
    margin: 0 auto;
    border: 0px solid;
    height: 200px;
    display: block;
}

#one {
    width: 40%;
    float: left;
    background: red;
}

#two {
    background: yellow;
}

#three {
    width: 40%;
    float: inherit;
    background: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

【问题讨论】：

您的#two div 不是浮动的...并且充当块级元素（应该如此，顺便说一句...）检查我的答案:-)
为这些 div 提供固定宽度并使用 float: left;
感谢您这么快的回复，我确实尝试过，但是一旦我更改浏览器的大小，我制作的第三个 div，一旦我在这些 div 中有很多信息，最终会低于 div1看起来很奇怪，您是否有解决方案？
@Julius 检查我的答案。你应该给你所有的div float:left;和一个固定的（百分比），你会没事的:-)
@Julius，你有 width: auto;宽度：40%；而不是那些你应该使用的东西 width: 400px;

标签： html css

【解决方案1】：

查看this fiddle

#wrap::after {
    display: block;
    height: 0px;
    clear: both;
    float: none;
}

#wrap div {
    float: left;
    word-break: break-all;
}

#one {
    width: 40%;
    background-color: red;
}

#two {
    width: 20%;
    background-color: yellow;
}

#three {
    width: 40%;
    background-color: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

【讨论】：

谢谢！这正是我想要的
@Julius 所以将其标记为正确答案是正确的做法:-)
我也在尝试它告诉我等待 50 秒

【解决方案2】：

#two 和 #three(inherits from parent which is none) 没有float:left，你应该给这些元素width。例如，这里我将width:32% 赋予所有div 元素（#one、#two、#three）。

 .fl-l
{
  float:left;
  word-break: break-all;
   width: 32%;
}

#wrap{
    width:auto;
 margin:0 auto;
  border:0px solid;
 height:200px;
  display:block;
  
}
#one {
  background:red;
}

#two {
 background:yellow;
}

#three {
   background:blue;
}

<div id="wrap">
    <div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

【讨论】：

谢谢！这正是我想要的
@Julius 欢迎您。祝你好运。

【解决方案3】：

要固定宽度，请将绝对值设置为 wrap 元素。

body {} 
#wrap {
  width: auto;
  margin: 0 auto;
  border: 0px solid;
  height: 200px;
  word-break: break-all;
  font-size: 0;
}
#wrap > div {
  height: 100%;
  display: inline-block;
  overflow: auto;
  font-size: 14px;
  }
#one {
  width: 40%;
  background: red;
}
#two {
  width: 20%;
  background: yellow;
}
#three {
  width: 40%;
  background: blue;
}

<div id="wrap">
  <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

【讨论】：

我会将所有 height、display、overflow 和 font-size 折叠成一个单独的 css 声明并避免所有重复 :-)
@RonenCypis 是的，我也愿意，给点时间考虑一下（现在完成）。我的主要目的是提出内联块解决方案。我总是在花车上遇到麻烦。