Выравнивание Div с помощью CSS - PullRequest
Новая
       21

Выравнивание Div с помощью CSS

1 голос
/ 19 августа 2009

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

<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 с помощью divs и CSS? Кроме того, есть ли способ установить минимальную ширину боковых панелей? Т.е. размер, который они не могли бы уменьшить ниже? (например: )

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

Ответы [ 3 ]

3 голосов
/ 19 августа 2009

Есть ли какая-либо конкретная причина, по которой вы хотите использовать 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>

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

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

0 голосов
/ 19 августа 2009

Взгляните на эту статью: http://www.alistapart.com/articles/holygrail/

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

0 голосов
/ 19 августа 2009

Редактировать: @ Ответ прорыва кажется, что он делает именно то, что вы хотите, используя только 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...