Układ CSS - Szerokość dynamiczna DIV

Question

Mam dość powszechny problem z układem, który tradycyjnie stosowałem do rozwiązywania problemów przy stole, ale chciałbym poradzić się, jak to zrobić przy pomocy CSS. Mam 3 obrazy, które tworzą "pojemnik". Lewe i prawe obrazy są zwykle wyświetlane za pomocą znaczników, a środkowy obraz jest wyświetlany jako "obraz w tle" z moją zawartością, dzięki czemu treść wydaje się znajdować w kontenerze. Na pewno widziałaś/używane to milion razy:

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

Dobrą rzeczą jest to, że szerokość tabeli jest zawsze szerokość przeglądarce (lub rodzic), a środkowa kolumna, gdzie treść jest dynamicznie rozmiarach do podjęcia pozostałą przestrzeń pomiędzy prawem obrazów lewych/

Co chcę się odtworzyć to przy użyciu CSS, z jak trochę twarde zakodowanej informacji jak to możliwe, coś takiego:..

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

Działa to świetnie, akceptując środkowy div - jak ustawić szerokość? W tej chwili mogę zakodować go na przykład, powiedzmy, 92% itd. Ale chcę, żeby to było, żeby automatycznie wypełniał przestrzeń. Czy można to zrobić za pomocą tylko CSS?

Answer 1

spróbować

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

lub

<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

To zrobi, co chcesz. Naprawiono boki o szerokości 50 pikseli, a zawartość wypełnia pozostały obszar.

<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

Lub, jeśli znasz szerokość dwóch "bocznych" obrazów i nie chcą zajmować się pływaków:

<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'); 
} 

Uwagi:

Pozycja: względna na div rodzica służy do ustawiania się absolutnie pozycjonowanych pozycji potomnych względem tego węzła.

Answer 4

dokonywania dynamycal szerokość z urządzeń mobilnych wspierać

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