html - 左对齐、右对齐和居中对齐的 div

Question

我正在尝试创建一个包含多个 3 个 div 的页面，它们左右对齐并居中。

我尝试使用 float:left 和 float:right 但效果很差。页面 super 随机缩放，我希望 div 在页面缩小时变成 2 列，然后在移动设备上变成 1 列。

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
}
.left,
.middle,
.right {
  width: 200px;
  height: 200px;
  background-color: red;
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}

<div class="container">

  <div class="left">
    <div class="content">
    </div>
  </div>
  <div class="middle">
    <div class="content">
    </div>
  </div>
  <div class="right">
    <div class="content">
    </div>
  </div>

</div>

jsFiddle:https://jsfiddle.net/azizn/j4cgef5g/

Answer 1

这是 flexbox 的教科书用例:

.container{
  display: flex; 
  justify-content: space-between;
}

这是一个例子:http://codepen.io/memoblue/pen/XKQqGg

有很多方法可以处理响应方面的问题，但我需要更具体地了解布局在不同断点处的外观，以便为您提供有用的答案......