左，右和中心对齐的div

Question

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

我尝试使用float:left和float:right但效果确实很糟糕。 该页面可超级随机缩放，我希望当页面缩小时div分成2列，然后移动设备的div变为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％的死区还是不明显的。