Html 容器内部3个分区的等间距

容器是1200px，每个div只有292px宽。理想情况下，DIV 1将坐在左边的边缘，div 3会坐在右边的边缘，div 2会正好坐在中间。更复杂的是，当在移动设备上观看时，容器将减少到320px，所有3个div应在垂直方向上彼此对齐，在彼此下方。目前，每个div的css如下所示：

.test1 {
float:left;
width:292px;
background-color:#F2F2F2;
margin:0 4px 5px;
border:1px solid grey;
line-height:0;
}

---

你在找这样的东西吗

.container {
    width: 1200px;
}
.test1 {
    float:left;
    width: 24.333333333%;
    height: 200px;
    background-color:#F2F2F2;
    margin-left:13.3%;
    border:1px solid grey;
    line-height:0;
}

.test1:first-child {
    margin-left: 0;
}

---

在容器上使用

text align:justify

，这样无论容器中有多少个元素，它都能工作（您不必计算每个列表项的宽度百分比

<div class="container">
    <div class="test1"></div>
    <div class="test1"></div>
    <div class="test1"></div>
</div>

<parent 
       style="display:flex;justify-content:space-between;">
  <child left   />
  <child center />
  <child right  />
</parent>

---

根据您的html结构，可以通过不同的方式实现您想要的内容

带

浮动

：

  <tag left   :floatleft  />
  <tag right  :float:right/>
  <tag center :margin:auto/>

---

使用

@media

查询，当宽度不足以容纳其中3个时，您可以将行布局切换为列布局：

---

这里有一个代码笔，可以轻松设置和调整3个框292px的宽度：

使用

宽度：33%；

并设置

框大小：边框框；

并去除边距。我不希望div超过292。您的第二个示例工作得很好，直到我们得到的宽度小于子宽度之和。当没有足够的空间将它们放在一行上，它们应该垂直堆叠。要将它们堆叠为列，需要mediaquery在宽度低于约900px时添加flex direction:column。我将设置一个example@user3589055要与MediaQuery交换flex方向，请执行以下操作：

<parent 
       style="display:flex;justify-content:space-between;">
  <child left   />
  <child center />
  <child right  />
</parent>

section {
  display:flex;
  justify-content:space-between;
}
article {
  width:292px;
  background:green;
}
@media all and (max-width:900px) {
  section {
    flex-direction:column ;
  }
  article {width:100%;
  }
}

<section>
  <article> 292px width</article>
  <article> 292px width</article>
  <article> 292px width</article>
</section>

<parent 
       style="text-align:center">
  <child left    style="display:inline-block"/>
  <child center  style="display:inline-block"/>
  <child right   style="display:inline-block"/>
  <pseudo-tag    style="display:inline-block;width:100%"/><!--this can be either a pseudo element or a neutral tag in HTML to enhance compatibility for IEs<8 -->
</parent>