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

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

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

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

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

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