Вопрос о div в построении веб-страницы HTML

Question

Всякий раз, когда я создаю свои личные веб-страницы, у меня всегда возникала проблема с использованием div для создания многостолбцовой разметки. Я использую атрибут float, чтобы выровнять их по левому или правому краю, но когда я делаю окно браузера более тонким, столбцы перестраиваются, где один столбец падает ниже другого, и другие вещи портятся при выравнивании. Я бы хотел, чтобы колонки оставались на месте, как и все другие сайты.

Какой метод лучше для этого?

Answer 1

Зачем изобретать велосипед? Есть множество сайтов, которые предлагают бесплатные шаблоны именно для того, чего вы пытаетесь достичь. Проверьте некоторые из них:

• Макеты Iron Myers
• Мэтью Тейлор - Святой Грааль
• Больше из списка отдельно
• Одна верная схема

Надеюсь, они вам помогут!

Answer 2

Есть несколько возможных объяснений:

1) Если у вас есть контейнер для жидкости со столбцами фиксированной ширины, размер контейнера изменится, и столбцы больше не будут помещаться. Вы можете добавить заданную ширину к контейнеру или сделать колонки текучими (на основе%). Вы можете даже сделать одну из колонок текучей, если будете использовать подход Николь Салливан здесь: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

2) Если вы уже используете полностью изменчивый метод, но используете IE6 / 7 для его просмотра, вы можете столкнуться с ошибками субпиксельного округления при определенных размерах. Подход Николь тоже это решает.

Вам не нужны таблицы, только немного математики.

Answer 3

Вы можете указать ширину контейнера столбца div.

Answer 4

Решение не в том, чтобы использовать float для всего. Конечно, вы можете купить шаблон и «перенести» проблему, но обычно столбчатый макет веб-страницы достигается с помощью комбинации полей и позиций (включая отрицательные значения). Или - конечно - таблицы, но остерегайтесь потери семантической ценности HTML при их использовании (например, программы чтения с экрана и линейные парсеры будут сбиты с толку).

Answer 5

Вы можете использовать min-width и заставить его работать в IE6, используя ie7.js

Answer 6

Вы можете использовать команду min-width CSS, чтобы указать минимальную ширину вашей страницы. См. эту страницу для примера.

Answer 7

Просто установите явную ширину для ваших элементов. Это должно сделать их невосприимчивыми к любому изменению размеров.

div.clear  { clear:both; }
#container { width:640px; }
  #nav     { float:left; width:200px; }
  #content { float:left: width:440px; } 

<div id="container">
  <div id="nav">
    <p>Hello World</p>
  </div>
  <div id="content">
    <p>Hello World</p>
  </div>
  <div class="clear"></div>
</div>

Answer 8

Я, вероятно, буду заброшен за это, но до тех пор, пока IE6 не исчезнет с лица земли, использование таблицы для многостолбцовой раскладки действительно является самым безопасным и простым способом. Конечно, это не «правильный» способ сделать это, но в этом случае награда за то, что вы делаете это правильно, настолько мала, что вы могли бы просто сесть за стол и перейти к более важным вещам.

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