HTML / CSS: фиксированная ширина поля и жидкости

Question

Как мне сделать это с помощью CSS:

Я хотел бы иметь 2 divs или больше, и их width должно быть в percent, но поле между div должно быть фиксированным,в этом примере 30px

Проблема для меня заключается в разнице между двумя div, потому что я могу поместить div в больший div и установить отступы влево и вправо в 30px, и это нормально, но чтомне делать с полем между двумя div?

Если я попытаюсь добавить, например, к первому div margin-right:30px;, то ширина div будет 70% + 30px, что в целом будет больше 100%и второй div упадет.

Так, каково решение для этого?

Answer 1

Это достаточно близко?

Демо-версия

HTML:

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

CSS:

#container {
    margin: 0 30px 0 30px;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 70%;
    position: relative;
    left: -30px;
}
#left2 {
    height: 200px;
    margin: 0 0 0 30px;
    background: #ccc
}
#right {
    height: 200px;
    float: right;
    width: 30%;
    background: #666
}

Answer 2

Поддержка Calc теперь приличная , так что вы можете использовать ее для смешивания и сопоставления единиц . Используя это, вы можете придумать что-то, что работает довольно хорошо:

http://jsfiddle.net/CYTTA/1/

#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}

Возможно, вам придется добавить префикс calc к -webkit или -moz.

Ширина первого составляет 70% за вычетом левого поля (30 пикселей) и минус половина среднего поля (15 пикселей). Второй - 30% минус правая граница (30px) и минус половина среднего поля (15px).

В то время как ширина не будет точно равна 70% и 30%, у вас будет плавный макет с фиксированными полями.

Answer 3

Я нашел способ сделать это, сохранив соотношение ширины контейнеров ровно 70%: 30%. Попробуйте это, у меня работает ...

HTML:

<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>

CSS:

*{
    margin:0;
    padding:0;
}
#page{
    margin:30px;
}
#a{
    width:70%;
    float:left; 
}

#aWrap{
    margin-right:15px;
    background:#aaa;
}
#b{
    width:30%;
    float:right;        

}
#bWrap{
    margin-left:15px;
    background:#ddd;
}

Удачи!

Answer 4

Да, мое решение было похоже на другие. A #wrap имеет заполнение 30px, для #main и #side установлены процентные соотношения, которые плавают влево и вправо соответственно. #main имеет дополнительный <div> внутри с 30px правым полем.

http://jsfiddle.net/Marcel/FdMFh/embedded/result/

Отлично работает во всех современных браузерах, которые я установил (Chrome, Firefox, Safari, Opera, IE9 RC), я уверен, что он выйдет из строя где-то более старым, но его можно исправить.

Answer 5

У Thirtydot есть хороший ответ (от меня голосование выше), чтобы отрегулировать левое расположение div относительно его контейнера, я бы только предположил, что он может нуждаться в тестировании в определенных браузерах, таких как более старые версии Internet Explorer.

В качестве альтернативы вы могли бы подумать, что регулировка левой позиции на фиксированную величину более запутанна, чем просто применение другой ширины.

Вы также запрашиваете ширину жидкости и фиксированное поле, в целом это больше неплавный макет ... ваши 30px будут выглядеть одинаково в большом или маленьком разрешении ... но ваша ширина изменится, либо установите ширину в пикселях, либо установите поле в процентах (возможно, попробуйте использовать max-width для некоторых браузеров тожедля больших разрешений).Более новые браузеры также корректируют макет пикселя при увеличении размера текста / масштаба, старые браузеры требуют использования EM для изменения размера текста.

пример с процентами и отступами:

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}

Answer 6

Вот мое решение.

html

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

css

#wrapper {
    margin:0 30px;
}

#left {
    width:70%;
    height:200px;
    background:black;
    float:left;
}
#rightWrapper {
    margin-left:99px;
}
#right {
    width:30%;
    height:200px;
    float:right;
    background:grey;
}

Демонстрация: http://jsfiddle.net/GEkG7/1/

Answer 7

Это может быть очевидно, и вы, вероятно, уже закололись, но (70% + 30% + 30px)> 100%.Без какой-либо вычислительной способности это не сработает, и у CSS2 такой возможности нет.Javascript мог бы сделать это, как предложил другой автор, и CSS 3 имеет значение из-за добавления его , по-видимому.

Не то чтобы это решение вашего исходного запроса, но вы можете принудительно установитьширина в правом контейнере и поддержание текучести в левом.

<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>

Оригинальный комментатор верен, хотя, ваш лучший выбор - один или другой.

Answer 8

Вы можете использовать функции загрузки javascript и onresize. В каждом из них вы сначала найдете ширину сетки контейнера, а затем вычислите ширину ваших сеток 70pc и 30pc в пикселях и установите их с помощью JS.

Например, используйте следующий код в функциях onload и onresize для страницы:

container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30