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

Question

У меня довольно распространенная проблема с макетом, для решения которой я традиционно использовал таблицу, но хотел бы получить несколько советов о том, как это сделать с помощью 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 - как мне установить ширину? Прямо сейчас я могу жестко запрограммировать его, скажем, на 92% и т. Д. Но я хочу, чтобы он автоматически заполнял пространство. Можно ли это сделать, используя только CSS?

Answer 1

1001 * попробовать *

<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>

Answer 2

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

<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>

Answer 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 используется для того, чтобы заставить абсолютно позиционированные дочерние элементы позиционировать себя относительно этого узла.

Answer 4

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

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html