CSS-only: как я могу сосредоточить фиксированную ширину div между двумя div, которые заполняют оставшееся пространство?

Ответ 1

Вот два способа работы: оба с предостережениями (предупреждение, оба требуют обертку):

HTML

<section class="wrapper">
    <div class="column" id="a"></div>
    <div class="column" id="b"></div>
    <div class="column" id="c"></div>
</section>​​​​​​​​​​​

Базовый CSS

.column {
    height: 3em;
}

#a {
 background-color: red;   
}
#b {
 background-color: green;
}
#c {
 background-color: blue;   
}

#b {
  width: 50px;   
}

Подход CSS3:

.wrapper {
    display:box;
    box-orient:horizontal;
    box-align:stretch;    
}

#a, #b {
    box-flex:1.0;
}

Предостережение. Поддерживается (пока) в Firefox и Webkit (Chrome/Safari), и для них требуются префиксные правила. Выше было то, что будет когда-нибудь.

Вот демо с префиксами: http://jsfiddle.net/crazytonyi/cBVTE/

Подход с табличным дисплеем

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;

}    
.column {
    display: table-cell;
}

Предостережения: IE не начал поддерживать этот тип отображения до 7 или 8. С другой стороны, беспокоиться о пользователях более старых версий IE - это беспокоиться о людях, которые все еще отключили файлы cookie и javascript. Либо они догоняют, либо привыкают к разрыву страниц. Закончите потворство!

Здесь приведено демо: http://jsfiddle.net/crazytonyi/kM46h/

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

Ответ 2

EDIT: Пожалуйста, используйте решение Anthony! Он удовлетворяет всем требованиям без какого-либо ужасающего взлома CSS! Если вам нужно поддерживать более старые браузеры, не стесняйтесь использовать мое решение (но, srrsly, решение Anthony идеально подходит для большинства случаев).

Я не знаю, как я еще не пробовал это решение, но это работает даже лучше, чем этот принятый ответ! Без округления!

решено!

Если мы рассмотрим округленное 50% как значение (X) и постоянную ширину B как значение Y, нам нужно:

ширина A = X
ширина C = 100% - X

Я решил использовать это как свою структуру:

<container>
  <a></a>
  <b></b>
  <c_holder>
    <c>
    </c>
  </c_holder>
</container>

Q. Как мы можем получить C для ширины container_width - X?
A. Мы даем C контейнеру c_holder с шириной 100% и даем C левое смещение X (50%).

забыть B на данный момент...

теперь у нас есть 2 divs рядом с eachother... каждый примерно 50%, но с точностью до 100%.

Бросьте все это в контейнер и дайте этому контейнеру правое поле Y (ширина B div). теперь у нас есть А и С рядом друг с другом, но они занимают 100% - Y от ширины.

дайте c_holder левое смещение Y и оставьте B между A и c_holder. примените левый поплавок на A и B.

теперь Ширина X, ширина B Y, C полное смещение слева X + Y, а видимая ширина C 100% контейнера - X - Y.

kinda funky, но он отлично работал в IE7, Chrome и Safari. Я позже проведу FF.

Ответ 3

Я думаю, вам нужно использовать вот так.

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

.a
{
width:50%;
height:25px;
background-color:#0F0;
float:left  
}
.b
{
width:13px;
height:25px;
background-color:#FFF;
margin-left:-6px;
float:left; 
position:relative;
z-index:99;
}
.c
{
width:50%;
height:25px;
background-color:#C33;
margin-left:-7px;
float:left; 
}
</style>

Ответ 4

<style>

.a{ width:50%; height:25px; background-color:#0F0; float:left }
.b{ width:13px; height:25px; background-color:#FFF; float:left;
    position:relative; left:51%;}
.c{ width:50%; height:25px; background-color:#C33; float:right; }

</style>

Ответ 5

демо на dabblet.com:

http://img838.imageshack.us/img838/6116/cff430b799254087b6ec991.png

HTML:

<div id="main">
    <div class="half left">
        <div>
            <div id="a" class="col"> </div>
         </div>
    </div>
    <div class="half right">
        <div>
            <div id="c" class="col"> </div>
         </div>
    </div>
    <div id="b" class="col"> </div>
</div>

CSS

#main {
    height: 40px;
    width: auto;
    border: 1px solid #cfcfcf;
    position: relative;
}

.half {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
}

.half.left { left: 0; }
.half.right { right: 0; }

.half > div {
    height: 100%;
    padding:0 8px;
}

.half.left > div { padding-left: 7px; }
.half.right > div { padding-right: 7px; }

.col {
    height: 100%;
    margin-top: 3px;
}

#a,
#c {
    background-color: green;
}

#b {
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    width: 14px;
}

обновление: обновлено без перекрытия