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

Posted 2023-03-05

【中文标题】如何并排制作3个div [重复]

【英文标题】：How to make 3 divs side by side [duplicate]

【发布时间】：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>

【参考方案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 都在同一行

编排在同一行