Проблемы с версткой HTML - PullRequest
Новая
       10

Проблемы с версткой HTML

0 голосов
/ 07 апреля 2009

У меня проблема с разделением многоколоночного макета в HTML. Я разделил страницу на две колонки:

inner1

  • Два ряда.
  • another_top1: фиксированная ширина, фиксированная высота
  • Ответ: фиксированная ширина, переменная высота

inner2

  • Два ряда.
  • another_top2: фиксированная ширина, переменная высота
  • another_below: фиксированная ширина, фиксированная высота

Проблема:

Когда я пытаюсь разделить inner1 на две колонки, как показано ниже, все работает нормально.

  1. inner1
  2. inner1_2

Мои inner2 столбец another_top2 данные, добавленные ниже, плавающие ниже inner1_2 заканчивается.

CSS: 

#another_top1{
    width: 500px;
    height: 200px;
}

#another_top2 {
    float: right;
    display: inline;
    width: 350px;
    padding: 0 0 10px 10px;
    margin-bottom: 10px;
    color: #fff;
}

#outer{
    background-color: #FFFF99;
}

#inner1{
    float: left;
}

#inner1_2 {
    float: left;
    margin-top: 200px;
}
.twoColumn #inner1 { width: 62%; }
.twoColumn #inner1_2 { display: none; }
.threeColumn #inner1 { width: 41%; }
.threeColumn #inner1_2 { width: 21%; }

#inner2{
    float: right;
    width: 39%;
}

Как я могу это исправить?

1 Ответ

0 голосов
/ 07 апреля 2009

Мне кажется, что ошибка вызвана тем, что значение в левом столбце шире, чем столбец, и толкает содержимое в правом столбце вниз. Убедитесь, что поля или отступы inner1_2 не делают рамку шире, чем левый столбец.

Я бы также порекомендовал установить # inner2 фиксированной ширины, то есть, по крайней мере, ширину двух ваших столбцов. Таким образом, вы убедитесь, что эти два столбца будут соответствовать.

Кроме того, проверьте свой тип документа (http://www.alistapart.com/articles/doctype/)), чтобы убедиться, что вы находитесь в стандартном режиме, или исправьте проблемы с блочной моделью, которые могут возникнуть, если вы находитесь в режиме quirksmode.

Наконец, вы можете использовать Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) или Xray (http://www.westciv.com/xray/)), чтобы проверить размеры ваших элементов div, а затем посмотреть, выходит ли он за пределы левого столбца.

...