Макет CSS - динамическая ширина DIV

У меня довольно распространенная проблема размещения, которую я традиционно использовал для решения таблицы, но хотел бы получить некоторые советы по ее выполнению с помощью CSS. У меня есть 3 изображения, которые составляют "контейнер". Левое и правое изображения обычно отображаются только с помощью тегов, а центральное изображение отображается как "фоновое изображение" с моим контентом поверх него, так что содержимое отображается в контейнере. Я уверен, что вы видели/использовали это миллион раз:

<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>

Приятная вещь в том, что ширина таблицы всегда равна ширине браузера (или родительского) и среднего столбца, где содержимое имеет динамические размеры, чтобы занять оставшееся пространство между изображениями влево/вправо.

То, что я хочу, воссоздает это с помощью CSS с минимальной информацией с жестким кодированием. Так что-то вроде этого:

<div style="float:left; width:100%">
  <div style="width: 50px;float:left;"><img src="myleftimage" /></div>
  <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
  <div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>

Это отлично подходит для среднего div -how, я устанавливаю ширину? Прямо сейчас я могу записать его, скажем, на 92% и т.д. Но хочу, чтобы я хотел, чтобы он автоматически заполнял пространство. Можно ли использовать только CSS?

Ответы

Ответ 1

попробовать

<div style="width:100%;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>

или

<div style="width:100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>

Ответ 2

Это сделает то, что вы хотите. Фиксированные стороны с шириной 50 пикселей, а содержимое заполняет оставшуюся область.

<div style="width:100%;">
    <div style="width: 50px; float: left;">Left Side</div>
    <div style="width: 50px; float: right;">Right Side</div>
    <div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>

Ответ 3

Или, если вы знаете ширину двух "боковых" изображений и не хотите иметь дело с поплавками:

<div class="container">
    <div class="left-panel"><img src="myleftimage" /></div>
    <div class="center-panel">Content goes here...</div>
    <div class="right-panel"><img src="myrightimage" /></div>
</div>

CSS

.container {
    position:relative;
    padding-left:50px;
    padding-right:50px;
}

.container .left-panel {
    width: 50px;
    position:absolute;
    left:0px;
    top:0px;
}

.container .right-panel {
    width: 50px;
    position:absolute;
    right:0px;
    top:0px;
}

.container .center-panel {
    background: url('mymiddleimage');
}

Примечания:

Позиция: относительный родительский div используется, чтобы сделать абсолютно позиционированные дочерние элементы по отношению к этому node.