左、右和居中对齐的 div

Question

我正在尝试创建一个连续有多个 3 个 div 的页面，这些 div 左右居中对齐。

我尝试使用float:left 和float:right，但效果非常糟糕。页面超级随机缩放，我希望 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

有很多方法可以处理响应式方面，但我需要更具体地了解布局在不同断点处应该是什么样子才能给你一个有用的答案……

Answer 2

查看我在下面包含的示例（CSS 和 HTML 脚本）

HTML

<div id='columns'>
    <div id='col1'></div>
    <div id='col2'></div>
    <div id='col3'></div>
</div>

CSS

#columns{
    position: absolute;
    height: 100%;
    width: 100%;
}

#columns #col1{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col2{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col3{
    float: left;
    width: 33.33%;
    height: 100%;
}

@media media only screen and (max-width:1024px) and (min-width:540px){
    #columns #col1{
        width: 50%;
    }


    #columns #col2{
        width: 50%;
    }


    #columns #col3{
        width: 100%;
    }
}

@media media only screen and (max-width:540px){
    #columns #col1{
        width: 100%;
    }


    #columns #col2{
        width: 100%;
    }


    #columns #col3{
        width:  100%;
    }
}

请注意，我还没有实际测试过上面的示例，但它应该可以工作。您可以根据需要编辑宽度和高度值，以及媒体查询的宽度。随着屏幕变小，它会从显示中删除第 3 列和第 2 列，同时使其他列变大。要使三列位于左、中和右位置，您不需要指定不同的浮点数，因为在块中它们会自动碰撞并在左侧堆叠，直到它们碰到屏幕边缘。这也是为什么宽度一般只能是33.33%的原因，因为到33.333%一般会因为空间不够而导致第三块被推下。在大多数情况下，0.01% 的死区并不明显。