1

私は2列のレイアウトを持っています（流動的な左、固定された右）。
Fluid 列に 3 つの 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を揃えることができません。
幅は動的であるため、メディアクエリを使用できません。

更新
私は物事を明確にするためにいくつかの写真を追加しようとします.

大解像度: 3 つの div が中央に配置されます 大きな解像度

中解像度: 3 つの div が幅に収まります
中解像度

小さな解像度: 3 つの 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 に答える