Уловки CSS Layout - PullRequest
Новая
       13

Уловки CSS Layout

0 голосов
/ 04 ноября 2008

Я впервые экспериментирую с макетами CSS, и мой опыт работы с CSS очень прост. Чего я хочу добиться, так это двухколоночного макета: левая панель и контент.
Я нашел это: 

#leftcontent
{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent 
{
    position: absolute;
    margin-left: 181px;
    border:1px solid #C0C0C0;
    top: 10px;
    //fix IE5 bug
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 181px;
}

Это великолепно отображается в Firefox, но контент в IE8 выходит из правой части экрана, я полагаю, по длине #leftcontent. Как я могу это исправить?

Вероятно, это довольно простое исправление, но я экспериментировал и искал исправления, но это должно сработать. Я ценю любую помощь.

Ответы [ 6 ]

4 голосов
/ 04 ноября 2008

Я бы посоветовал переместить элемент #leftcontent влево, а затем установить поле элемента #centercontent для компенсации: 

#leftcontent {
        float: left;
        width:170px;
        border:1px solid #C0C0C0;
        padding: 2px;
}

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}
1 голос
/ 04 ноября 2008

Мой любимый метод создания макетов столбцов - использовать float: left и right.

colwrapper установлен на ширину 40em, margin-...:auto делает div центрированным (по любой причине, кроме IE4 или IE5)

footer появляется после обоих столбцов из-за clear:both.

Это будет хорошо масштабироваться, когда вы увеличиваете размер шрифта (ctrl and + or -), и вы можете легко вкладывать столбцы в столбцы (чтобы сделать макет из 3 столбцов, вы делаете то же самое, но помещаете два элемента div внутри #colleft, и плавать влево / вправо их) 

#colwrapper{
    width:40em;
    margin-left:auto;
    margin-right:auto;
}
#colleft{
    float:left;
    width:10em;
}
#colright{
    float:right;
    width:30em
}
#footer{
    clear:both
}

И HTML: 

<div id="colwrapper">
    <div id="colleft">
        left column!
    </div>
    <div id="colright">
        right column!
    </div>
    <div id="footer">
        footer!
    </div>
</div>
1 голос
/ 04 ноября 2008

Используйте для этого свойство float. Отличное учебное пособие по плаванию - Floatutorial . Вот как ваш CSS будет выглядеть с помощью float: 

#leftcontent {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent {
    float: left;
    margin-left: 10px;
    border: 1px solid #C0C0C0;
    margin-top: 10px;
}

Тогда, если вы хотите, чтобы div отображался ниже этих div, вам нужно будет использовать этот CSS: 

#contentbelow {
    clear: both;
}

Кроме того, вы должны установить ширину для #centercontent, поскольку плавающим элементам всегда нужна явная ширина.

1 голос
/ 04 ноября 2008

Установить ширину #centercontent. Будет ли это процент или размер в пикселях, который будет тем, что вы ищете.

0 голосов
/ 04 ноября 2008

То, что другие сказали относительно float, должно помочь. Дополнительно , необходимо проверить две вещи:

  • Вы пытались установить overflow для левого контента, чтобы браузер лучше понимал, что делать, если что-то не помещается в отведенное вами пространство.
  • Вы искали, какой элемент вызывает переполнение левой стороны? Некоторые элементы просто не могут быть обернуты, и если они слишком широки, они заставят ширину всего div растягиваться, чтобы вместить их.
0 голосов
/ 04 ноября 2008

Используйте таблицу. Он больше подходит для этой задачи, проще в реализации и гораздо надежнее в разных браузерах.

...