CSS таблицы и контейнер минимальной ширины? - PullRequest
Новая
       18

CSS таблицы и контейнер минимальной ширины?

0 голосов
/ 13 апреля 2010 
<div id="wrapper">
  <div id="header">...</div>
  <div id="main">
    <div id="content">...</div>
    <div id="sidebar">...</div>
  </div>
</div>

#wrapper { min-width: 900px; }
#main { display: table-row; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

Проблема в том, что боковая панель не всегда находится в самой правой части страницы (в зависимости от ширины #content). Поскольку ширина #content является переменной (зависит от ширины окна), как мне сделать так, чтобы боковая панель всегда находилась в самой правой части своего родителя?

Пример:

Вот что у меня сейчас: 

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]  | [sidebar] |
            |           |
            |           |
            |           |
            |           |
            |           |
            |           |

А вот что я хочу: 

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]           | [sidebar] |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы помочь мне с этой проблемой. Спасибо!

PS - Я знаю, что могу легко сделать это с помощью поплавков. Я ищу решение, которое использует таблицы CSS.

РЕШЕНИЕ: 

#wrapper { min-width: 900px; }
#main { display: table; table-layout: fixed; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

Нет необходимости объявлять элемент table-row, благодаря анонимным элементам таблицы .

Ответы [ 2 ]

2 голосов
/ 13 апреля 2010

Вам нужно будет установить стиль display: table (или inline-table) в div обертки около #main, чтобы другие типы отображения таблицы имели смысл; неизвестно, что произойдет, если вы поместите строки внутри чего-то, что не является таблицей.

Затем в этой оболочке вам также нужно установить table-layout: fixed;, чтобы браузер действительно учитывал указанную вами ширину (в первой строке таблицы, если у вас нет явных столбцов). В противном случае вы получите алгоритм автоматического размещения таблиц, который вас угадывает. Наконец добавьте width: 100%;, чтобы избежать усадки.

Я ищу решение, которое использует таблицы CSS.

Есть какая-то причина для этого или это просто упражнение? Таблицы CSS сегодня не являются хорошим выбором из-за плохой поддержки браузера, и, в конце концов, они не дают вам ничего, кроме использования таблицы. Позиционирование CSS может показаться лучшим способом для простых макетов, подобных этой.

0 голосов
/ 13 апреля 2010

Установить родителя в положение: относительное. Затем установите боковую панель в положение: абсолютное и прижмите ее вправо.

Так .... 

#main{
position:relative;
}

#sidebar{
position:absolute;
right:0px;
}

Это должно держать вашу боковую панель плотно справа от основного, независимо от того, насколько широкий контент.

...