Question

我有两列布局（流体左，固定右）我想在流体柱中连续放置三个div，这样它们在包装器中居中，同时有足够的空间，然后它们应该在左边对齐。

<div class="wrapper">
Wrapper
<div class="header">
         header
</div> 
<div class="wrapleft">       
    <div class="left">
        <div class="subwrapper">
            <div class="first">Once this reach the left border, it should stay there.</div>
            <div class="second">This one should go under the blue div when there is not enough space for two divs and stay left aligned.</div>
            <div class="third">This one should go under the blue div when there is not enough space for three divs and stay left aligned.</div>
        </div>
    </div>
</div>    
<div class="right">
        right
</div> 
    <div class="footer">
        footer
    </div>

.wrapper{
   width: 100%;
   margin: 0 auto;
    text-align:center;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
    text-align:left;
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf;
    text-align:center;
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
   height: 200px;
    text-align:right;
}
.right{
   float: right;
   width: 240px;
   margin-left: -240px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

.subwrapper div {
    height: 100px;
    width:200px;
    margin: 0 auto;
    text-align:center;
    color:white;
    display: inline-block;
    vertical-align:top;
    }
.subwrapper {
width:100%;
    background:purple;
    max-width:100%;
}

.first {
    background:blue;
}

.second {
    background:green;
}

.third {
    background:red;
}

这是一个澄清我的意思的{jsfiddle http://jsfiddle.net/notme/SZjJG/
实际上我可以得到第一部分，但是一旦没有更多空间，我就无法对齐左边的div。
我不能使用mediaquery，因为宽度是动态的。

UPDATE
我尝试添加一些图片以使事情清楚。

大分辨率：三个div居中 Large resolution

中等分辨率：三个div适合宽度
Medium resolution

小分辨率：三个div应该留在左侧。 我不希望左边距以黄色圈出 Small resolution

Answer 1

尝试添加：

.first, .second, .third {
    float:left;
}

还要添加到子包装器：

max-width: 600px;
display: block;
margin: 0 auto;

出于显而易见的原因，您需要添加“display：block”和“margin：0 auto”。但是，“max-width”需要等于.first，second和.third div的最大宽度。

一旦你向.first，.second和.third div添加填充，宽度就会增加。不确定你是否知道。所以你可能想添加“box-sizing：border-box;”到你的.first，.second。和.third div的CSS。

示例：http://jsfiddle.net/SZjJG/17/

处理流体布局的水平对齐

1 个答案: