Обработка горизонтального выравнивания в гибком макете

У меня макет из двух столбцов (плавающий слева, фиксированный справа).
Я хочу поместить три 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 должны оставаться слева. Я не хочу, чтобы левое поле было обведено желтым.
Малое разрешение


css responsive-design position width fluid-layout
person pasine    schedule 05.12.2012    source источник
comment
Я не уверен, о чем вы спрашиваете, но если я правильно понимаю, он делает то, что вы хотели.   -  person Xarcell    schedule 05.12.2012
comment
это не так. Постараюсь выложить картинку, чтобы было понятнее.   -  person pasine    schedule 05.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить:

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

Также добавьте в подобертку:

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

Вам нужно добавить «display: block» и «margin: 0 auto», по понятным причинам. Однако «max-width» должна равняться максимальной ширине элементов div .first, second и .thert вместе.

Как только вы добавите отступы к .first, .second и .therd div, ширина увеличится. Не знаю, знали вы это или нет. Поэтому вы можете добавить «box-sizing: border-box;» к вашему .first, .second. и CSS .thert div.

Пример: http://jsfiddle.net/SZjJG/17/

person Xarcell    schedule 05.12.2012
comment
используя float left, я получаю правильный макет с маленьким разрешением, но div не центрируется с большим. - person pasine; 05.12.2012
comment
Добавлено объяснение к ответу. - person Xarcell; 05.12.2012