как мне заказать мои дивы?

Question

Вот базовый макет страницы, над которой я работаю:
альтернативный текст http://www.mfrl.org/images/pagelayout.png
Какой самый лучший / самый простой способ заказать div? C может быть или не быть видимым (это новостное оповещение, которое отображается только при наличии новостей). A = Заголовок, B = Меню, E & F = стандартные столбцы содержимого, D = последняя запись в блоге. Я думаю, что ABCEFD может иметь больше смысла, но я также мог видеть ABCDEF. Любое из них должно быть довольно легко сделать правильно, используя поплавки ... есть ли лучший способ? Может быть, поместить CEF в "средний столбец" div?

Answer 1

Возможно, вам придется сделать что-то ближе к ADBCFE.

Помните, что дивизии, всплывающие справа, должны появляться сначала, затем дивизии всплывали влево, затем основное деление, которое будет расширяться между ними. Так что А, очевидно, будет первым. Тогда D будет плавать направо, B будет плавать налево. Хорошей идеей будет использовать отдельное деление для середины и поставить C сверху, а F - вправо, а E - влево, или же вы хотите, чтобы эти два сработали в середине.

Answer 2

Учитывайте доступность при выборе порядка, в котором ваши элементы должны быть в документе. Например, программы чтения с экрана, как правило, читают сверху вниз в порядке разметки, поэтому размещение контента (C, E, F, D?) Раньше на странице может быть лучше.

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

Answer 3

Есть много способов сделать это. Вот что я бы сделал:

<div id="header"></div>
   <div id="A"></div>
</div>
<div id="main">
   <div id="left">
      <div id="B"></div>
   </div>
   <div id="center">
      <div id="C"></div>
      <div id="E"></div>
      <div id="F"></div>
   </div>
   <div id="right">
      <div id="D"></div>
   </div>
</div>

Answer 4

Я бы сделал заголовок div = a и body div {b, c, d, e, f}. Внутри тела div я бы сгруппировал {e, f} или, может быть, {c, e, f} в div

Но это только мои 2 цента