1

我有一个两列布局（流体左侧，固定右侧）。
我想在流体列中连续放置三个 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。
我不能使用媒体查询，因为宽度是动态的。

更新
我尝试添加一些图片以使事情变得清晰。

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

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

小分辨率：三个 div 应该留在左侧。我不希望左边距用黄色圈起来。
小分辨率

4

1 回答 1

0

尝试添加：

.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/

于 2012-12-05T14:30:51.387 回答