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

Question

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

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

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

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

Answer 1

Решение 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 сначала устанавливает левое, а затем правое плавание, затем содержимое, которое не всплывает и, таким образом, отображается между всплывающими элементами. Также контент не имеет определенной ширины, поэтому он заполнит пространство.

Answer 2

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

[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;
}

Answer 3

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

Answer 4

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

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

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

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

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