Выравнивание Divs с CSS

Я знаю, что во всем Google есть множество статей о том, что они делают что-то похожее, но проблема в том, что все они различаются в реализации. То, что я в основном хотел бы сделать, - установить единицу div фиксированной ширины в центр моей страницы, с барами на стороне, стильной, что бы я ни хотел. В Flex (MXML), я мог бы легко сделать это случиться что-то вроде этого:Выравнивание Divs с CSS

<mx:HBox width="100%"> 
    <mx:VBox id="sideBarLeft" width="100%"/> 
    <mx:Panel id="content" width="500"/> 
    <mx:VBox id="sideBarRight" width="100%"/> 
</mx:HBox>

Это дало бы мне дизайн, который выглядит следующим образом:

[sideBarLeft][content][sideBarRight]

боковые панели будет расширяться, поскольку область экрана растет, но содержание останется неизменным, 500 пикселей в ширину.

Как бы достичь этого в HTML с помощью div и CSS? Кроме того, существует ли способ установить минимальную ширину боковых панелей? Т.е.: размер, который они не могли сжать ниже? (Например: < тх: VBox ид = «sideBarLeft» ширина = «100%» MinWidth = «150»/>)

И я извиняюсь за природой, сколько новичок я в этом материале. Я предполагаю, что я потратил слишком много времени созданию приложений и слишком мало времени с HTML и CSS :)

источник

2009-08-19 Naftuli Kay

Есть ли какая-то конкретная причина, по которой вы хотите использовать ячейки таблицы div в этом случае?

Несмотря на это, я пришел с быстрым решением, которое вы могли бы:

<html><head> 
<style type="text/css"> 
*   { margin: 0; padding: 0; } 
body  { text-align: center; } 
#content { width: 500px; height: 100%; margin: 0 auto; 
      text-align: left; background: #DDDDDD; overflow: auto; } 
.column { width: 50%; position: absolute; top: 0; height: 100%; } 
#leftcol { margin-right: 250px; background: #AAAAAA; height: 100%; } 
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; } 
</style> 
</head><body> 
<div class="column" style="left:0;"> 
<div id="leftcol">This is the column on the left.</div> 
</div> 
<div id="content">Your content goes here.</div> 
<div class="column" style="right:0;"> 
<div id="rightcol">This is the column on the right.</div> 
</div> 
</body></html>

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

Только оговорено: использование таблиц является предпочтительным способом для этого и является совершенно приемлемым. Нет проблем с микшированием таблиц и разделов, а также таблицами стилей и позиционирования с CSS. Это решение является скорее «обходным путем», но одно можно сказать наверняка - оно работает.

источник

2009-08-19 19:08:37 Breakthrough

Серьезно. Верир хорошо. – Donut

Это бесстрашный гений. Отличная работа! Извините, так как я больше разбираюсь в CSS, я постоянно разочарован другими разработчиками в использовании таблиц. Там как это странное вуду об использовании таблиц в дизайне. –

Бывают случаи, когда полезно использовать таблицы, и когда полезно использовать div. Общая мысль в Интернете заключается только в использовании div ... Я бы сказал, чтобы использовать div, но если вам абсолютно необходимо использовать таблицы, пойдите для этого - особенно в таком случае, где это будет совместимо с каждым браузер (больше, чем продвинутые трюки CSS). Все зависит от того, насколько сложна ваша макет. – Breakthrough

Edit: @ ответ прорывных, кажется, что это делает именно то, что вы хотите, используя только div's и CSS; Я просто оставлю свое CSS-ified решение с таблицами в качестве альтернативы.

<html> 
<head> 
    <style type="text/css"> 
     #main { min-width: 800px; width: 100%; } 
     #content { width: 500px; background: red; } 
     .sidebar { background: blue; min-width: 150px; } 
    </style> 
</head> 
<body>  
<table id="main"> 
    <tr> 
     <td class="sidebar">Left</td> 
     <td id="content">Center</td> 
     <td class="sidebar">Right</td> 
    </tr> 
</table>  
</body> 
</html>

источник

2009-08-19 18:50:40 Donut

Посмотрите на эту статью: http://www.alistapart.com/articles/holygrail/

Это противоположно тому, что вы хотите (жидкость среднего, фиксированные наружными), но это поможет вам думать и, возможно, приведет вас к правильному ответу.

источник

2009-08-19 18:52:38 Jason

Выравнивание Divs с CSS

ответ

Смежные вопросы