Как сделать, так чтобы блок nav был выровнен по правой стороне блока header?
Содержание
- 2 ответа 2
- Как расположить несколько блоков div в ряд? Как запретить обтекание блоков
- Как запретить обтекание блоков
- Пример горизонтального расположения нескольких блоков
2 ответа 2
Мне нравиться больше вариант делать так:
Это просто по опыту работает стабильнее и быстрее. И да, нужно родителю задать высоту, но в вашем случае она уже есть.
Можно, конечно, использовать #, но потом может появиться спец-эффект: ширина #header будет равна максимальной высоте из сыновей, у которых нет обтекания (float). Для этого после #nav надо добавить элемент со свойством: clear:both
Кстати в верстке принято писать ul вместо div#nav. И вместо span li . И нужно пофиксить отступы будет. Это считается более семантично.
Как расположить несколько блоков div в ряд? Как запретить обтекание блоков
Очень часто приходится расположить несколько блоков
Делается это очень просто, при помощи параметра float:…;, которым будем задавать обтекание блока справа, или слева, кому что нужно. Один важный момент — при таком позиционировании нескольких блоков
Как запретить обтекание блоков
При позиционировании блоков, часто случается так, если разрешено обтекание, то текст может подскакивать вверх, или между блоками смещаться. Решается такая проблема созданием блока с запретом обтекания со всех сторон. Такой div нужно сделать размером по высоте в 1 пиксель и ширине 100%.
И при надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу, которые нужно расположить в ряд.
Пример горизонтального расположения нескольких блоков
Для такого расположения блоков — всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков
1 контейнер div 2 divs. Хотелось бы поместить второй div в первую строку, но все это вправо.
Любая помощь будет оценена,
Повторное использование одного и того же id — это не очень хорошая идея, я все это меняю на class
здесь есть модификация
CSS
изменить div id на класс. вы не можете иметь две идентификаторы на одной странице. дайте divs ширину, например width:45% , и поплавьте эти предметы.
Похоже, что ширина первого div заставляет вторую строку ниже.
Источник: