如何并排制作3个div

Question

如何并排放置 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>

Answer 1

不要同时使用 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 的样式，请单独定位它们

Answer 2

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

Answer 3

试试这个。 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>

Answer 4

这就是您的代码

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

Answer 5

请检查下面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>

如何并排制作3个div

How to make 3 divs side by side

html

css

css-float