CSS простой отзывчивый дизайн

Question

im пытается построить 3 divs. «left» «Center» и Right «all float to left». «Left» и «Right» div фиксируются по ширине (например, боковые панели). «Центр» div (контент) либо авто, либо%. Когда i (например, центр div 60%), правый div переместится в нижнее положение. Если я использую (например, центр div auto), я получаю «левый» div на месте, «center» div принимает все оставшееся пространство и «правый» div ниже.

Что мне нужно, это «левое» и «правое» измерение размера дуги 250 пикселей. «Центр» заполняет оставшееся пространство между «левым и правым» div. И при изменении размера только ширина «центра div» изменяется на соответствие.

(Примечание: конечно, я использую медиа-запрос) Этот материал будет полезен для меня от 750 до 950 пикселей.)

<style type="text/css"> 
#left { 
float:left; 
height: 200px; 
width: 250px; 
border: medium dashed #03F; 
} 

#center { 
float:left; 
height: 200px; 
width: 60%; 
border: medium solid #C00; 
} 

#right { 
float:left; 
height: 200px; 
width: 250px; 
border: medium dashed #0C6; 
} 
</style> 


<div id="left"> 
</div> 

<div id="center"> 
</div> 

<div id="right"> 
</div> 

Answer 1

Проверьте это: http://jsfiddle.net/87enE/

Создать wrapper и использовать display:table;. Затем используйте dislay: table-cell для дочерних элементов:

HTML:

<div id="wrapper"> 

    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 

</div> 

CSS:

#wrapper{ 
    width: 100%; 
    display: table; 
} 

#left { 
    display: table-cell;  
    height: 200px; 
    width: 250px; 
    border: medium dashed #03F; 
} 

#center { 
    display: table-cell; 
    height: 200px; 
    border: medium solid #C00; 
} 

#right { 
    display: table-cell; 
    height: 200px; 
    width: 250px; 
    border: medium dashed #0C6; 
} 

Для отзывчивым беспокойства, лучше использовать percentage вместо fixed ширина:

Fiddle: http://jsfiddle.net/87enE/3/

Answer 2

You sh ould положить все div под table tr td и дать first и last td до размер заправки вы хотите (в%) и center до 100%.

Попробуйте это:

<style type="text/css"> 
#left { 
float:left; 
height: 200px; 
width: 100%; 
border: medium dashed #03F; 
} 

#center { 
float:left; 
height: 200px; 
width: 100%; 
border: medium solid #C00; 
} 

#right { 
float:left; 
height: 200px; 
width: 100%; 
border: medium dashed #0C6; 
} 
</style> 


<table style="width:100%;"> 
<tr> 
<td style="width:20%;"> 
<div id="left"> 
</div> 
</td> 
<td style="width:60%;"> 
<div id="center"> 
</div> 
</td> 
<td style="width:20%;"> 
<div id="right"> 
</div> 
</td> 
</table> 

вот demo

Примечание: Если вы хотите сохранить его в ответ, вы должны предоставить всю ширину в % вместо px. Также вы можете получить более подробную информацию о медиа-запросах here

Это должно помочь вам!

Спасибо.

Answer 3

В таких случаях, я считаю, FlexBox справляется с ситуацией лучше. #center 's ширина изменится, чтобы заняться оставшимся пространством.

<style> 
#container { 
    display:flex; 
    flex-flow: row nowrap; 
} 
#left { 
    height: 200px; 
    width: 250px; 
    order:0; 
    border: medium dashed #03F; 
} 
#center { 
    flex:1; 
    order:1; 
    height: 200px; 
    border: medium solid #C00; 
} 
#right { 
    height: 200px; 
    width: 250px; 
    order:2; 
    border: medium dashed #0C6; 
} 
</style> 

Answer 4

Вы можете попробовать это:

Fiddle Here:

<div id="wrapper" class="clearfix"> 

    <div class="div" id="left"> 
    </div> 
    <div class="div" id="center"> 
    </div> 
    <div class="div" id="right"> 
    </div> 

</div> 

удачи ..