如何并排制作3个div [重复]答案

【问题标题】：How to make 3 divs side by side [duplicate]如何并排制作3个div [重复]
【发布时间】：2017-04-05 15:54:56
【问题描述】：

如何并排制作 3 个 div。其中 div1 位于最左侧，div3 位于最右侧，div2 位于中间。

我知道这可以通过 display:flex 和 justify-content:space-between 来完成，但我正在寻找一种没有 flex 的方法。

这是我的方法，但未能成功。

我尝试将所有 div 的 display:inline-block 和 float:left 和 float:right 设置为两个极端 div，对于中间的一个我尝试了 margin:auto，但看起来它不尊重它

请帮忙

.container {
  border: 1px solid;
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
}
#div1 {
  float: left;
}
#div3 {
  float: right;
}
#div2 {
  margin: auto;
}

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

【问题讨论】：

标签： html css css-float

【解决方案1】：

试试这个。 position: absolute;

.container {
  border: 1px solid;
  position: relative;
  overflow: hidden;
  
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  
}
#div1 {
 float: left;
}
#div3 {
 float: right;
}
#div2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

【讨论】：

这很好，但你能解释一下为什么 margin:auto 不能正常工作，为什么必须绝对定位
margin: 0 auto 仅适用于块级元素。只要您的元素有宽度，position: absolute; left:0; right: 0; margin: auto; 就会将其水平居中，否则它将从左向右延伸。
margin:auto 不适用于内联块
感谢您的解释

【解决方案2】：

这就是你的代码

    .container {
      border: 1px solid;
    }
    .container div {
      height: 50px;
      width: 50px;
      background: red;
      display: inline-block;
    }
    #div1 {
      float: left;
    background-color:red;
    }
    #div3 {
      float: left;
      background-color:green;
    }
    #div2 {
      float: left;
      background-color:yellow;
    }

和

<div class="container">
  <div id="div1">div 1</div>
  <div id="div2">div 2</div>
  <div id="div3">div 3</div>
</div>

【讨论】：

三个都向左浮动？

【解决方案3】：

请检查下面的 CSS 看看这是不是你想要的：

.container {
  float: left;
  width: 300px;
  border: 1px solid;
}
#div1 {
  float: left;
  width: 100px;
  background-color: red;
}
#div2 {
  float: left;
  width: 100px;
  background-color: green;
}
#div3 {
  float: left;
  width: 100px;
  background-color: blue;
}

<div class="container">
  <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div>
  <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div>
</div>

【讨论】：

【解决方案4】：

.container {
  border: 1px solid;
  position: relative;
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: block;
}
#div1 {
  float: left;
}
#div3 {
  position: absolute;
  right: 0;
  top: 0;
}
#div2 {
  margin: auto;
}

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

【讨论】：

您正在重新排列 div，我希望 div1 浮动：向左和 div3 浮动：向右
如果允许重新排序，这个问题很容易解决。
我已经编辑了答案。如果无法更改顺序，我必须将 div3 设置为绝对值。
感谢您的建议

【解决方案5】：

不要同时使用float 和inline-block。这将起作用：

<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

.container { 
  width:100%;
}

#div1, #div2, #div3 {
  height: 50px;
  background: red;
  display: inline-block;
  width:33.33%;
  margin-right:-4px;
}

如果您想单独设置 div 的样式，则单独定位它们

【讨论】：

我希望所有三个 div 都在同一行
编排在同一行