css проблема дизайна жидкости

пожалуйста, найдите код здесь: http://jsfiddle.net/yuliantoadi/XQuuT/

вы могли видеть, что ширина grid_1 и grid_2 фиксирована и составляет 50 пикселей, но ширина grid_2 составляет 80%. проблема в том, что когда я уменьшаю ширину оболочки, div grid_3 опускается.

есть идеи, как заставить grid_3 оставаться наверху, когда мы уменьшаем ширину оболочки без использования javascript?

пожалуйста, не меняйте ширину grid_1 и grid_3.


css fluid
person yoel    schedule 15.06.2011    source источник

Ответы (4)


arrow_upward
1
arrow_downward

CSS решения:

.grid_1{
    float: left;
    width: 50px;
    background-color: green;
}
.grid_3{
    float: right;
    width: 50px;
    background: red;
}
.grid_2{
    background: yellow;
}

HTML-код решения:

<div class="wrapper">
    <div class="grid_1">
        left
    </div>
    <div class="grid_3">
        right
    </div>
    <div class="grid_2">
        the content
    </div>
</div>

Обратите внимание, что HTML сначала устанавливает левое плавающее, затем правое плавающее, ЗАТЕМ содержимое, которое не является плавающим и, таким образом, отображается между плавающими элементами. Также содержимое не имеет определенной ширины, поэтому оно заполнит пространство.

person dkamins    schedule 15.06.2011
comment
почти уверен, что результат будет таким же без изменения html, если и grid_1, и grid_3 имеют position:relative - person Nathan; 15.06.2011

arrow_upward
0
arrow_downward

Проблема вызвана использованием сочетания гибкой и фиксированной ширины элементов.

Скажем, ваша оболочка имеет ширину 1000 пикселей: grid_1 — 50 пикселей, grid_3 — 50 пикселей, а grid_2 — 80% или 800 пикселей, что нормально, все будет хорошо выровнено.

Если оболочка имеет ширину 400 пикселей, grid_1 и grid_3 по-прежнему имеют ширину 50 пикселей, а grid_2 — 320 пикселей (80% от 400 пикселей), что означает, что три элемента не могут располагаться рядом друг с другом, поскольку 50+50+320 = 420 пикселей.

По сути, как только ваша обертка станет меньше 500 пикселей в ширину, у вас будет перенос grid_3 на новую строку.

Не зная точно, чего вы пытаетесь достичь, трудно предложить решение

person Nathan    schedule 15.06.2011
comment
да, я думаю, что мне нужно использовать javascript для этого, действительно не могу найти здесь никакого решения - person yoel; 15.06.2011
comment
не нужно использовать javascript - я бы сделал все возможное, чтобы избежать использования js для управления макетом... - person Nathan; 15.06.2011

arrow_upward
0
arrow_downward

Я думаю, что это невозможно, если сетка 1 и 3 фиксированной ширины. Чтобы сетка 3 не опустилась, вы можете установить ее минимальную ширину.

person Jeaf Gilbert    schedule 15.06.2011

arrow_upward
0
arrow_downward

Существует также альтернативный метод с использованием отрицательных полей. HTML тот же, и вы добавляете отрицательные поля к левому и правому элементам и добавляете положительные поля к центру, что позволяет вам растянуть центр div до внешних краев стороны divs.

[class^=grid_]{
    float:left;
}
.grid_1{
    width:50px;
    margin-right: -50px;
    background-color:red;
}
.grid_2{
    width: 80%;
    margin-left: 50px;
    margin-right: 50px;
    background-color:cyan;
}
.grid_3{
    width:50px;
    margin-left: -50px;
    background:red;
}
person vhallac    schedule 15.06.2011