Горизонтальное центрирование двух делений (неравных по ширине), без переноса - PullRequest
Новая
       17

Горизонтальное центрирование двух делений (неравных по ширине), без переноса

0 голосов
/ 19 марта 2012

Моя страница выглядит так: http://ink -12.terc.edu / index.cfm Я хочу, чтобы изображение (детские рисунки) слева следовало за остальным центрированным содержимым, когда окно расширяется:

enter image description here

В соответствии с предложениями, которые я нашел в других ответах, я добавил внешний div (#maincontent) для хранения моих двух div, которые я хочу прокрутить вместо переноса (#tbltframe и #drawings), и некоторого дополнительного кодирования ( overflow:auto; display:inline-block; white-space:nowrap).

Теперь моя страница выглядит так: enter image description here http://ink -12.web5test.terc.edu / index.cfm

Так что теперь он не оборачивается (отлично!), Но он отрезал мою тень на правой стороне (вы все еще можете увидеть ее внизу). И мне нужно, чтобы основное содержание снова центрировалось (по центру верхнего и нижнего колонтитула) - аналогично первой веб-странице, которую я перечислил. После изменений основной контент выравнивается по левому краю. Я попытался добавить margin-right и margin-left:auto, а также text-align:center, но не сделал этого. Я также добавил минимальную ширину, которая, похоже, тоже этого не делает. Я снова вижу тень, когда меняю минимальную ширину на что-то значительно большее (74em), но я не знаю почему, потому что #tbltframe (50em) и #drawings (14em) = 64em всего.

Любая помощь будет очень признательна. Предложения двигаться дальше с кодом на любой веб-странице, которую я перечислил, было бы хорошо. Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 марта 2012

Нашли решение: http://www.search -this.com / 2008/08/28 / Let's-All-Get-In-in-in-a-block-in-block /

Необходимо:

Создать минимальную ширину или ширину на внешнем div (#maincontent)

Сделать #maincontent элементом блока с дисплеем: block

Center#maincontent with text-align: center

Сделайте так, чтобы внутренние div (#drawings и #tbltframe) не переносились в #maincontent with пробел: nowrap;

Делайте внутренние элементы div встроенными блочными элементамис отображением: inline-block

Затем снова сделайте текст внутри переноса (если хотите) с пробелом: обычный

0 голосов
/ 21 марта 2012

Пожалуйста, попробуйте следующую строку css на skeleton.css, строка 64 

#maincontent {
    display: inline-block;
    overflow: auto;
    white-space: nowrap;
    width: 1169px;
}

Это увеличит ширину основного содержимого div, чтобы изображения не обрезались по сторонам.

...