Вопрос по макету жидкости - PullRequest
Новая
       2

Вопрос по макету жидкости

0 голосов
/ 07 сентября 2011

Я проектирую гибкий макет и думаю о правильном подходе к кодированию макета .. Ниже приведена структура, о которой я думаю; 

<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>

Что касается CSS, я думаю о кодированииконтейнер как {ширина: 90%; поле: 0 авто; переполнение: скрыто}

Для 2 столбцов они будут смещены влево с некоторыми% ширины.

Как видите,Так как я хочу использовать гибкий макет, я нигде не использую значение px ..

Другие мои требования:

1 Он должен настраиваться автоматически в зависимости от области просмотра, например та же HTML-страница при просмотре на рабочем столеiPad (в некоторой степени мобильный телефон) должен настраиваться пропорционально по отношению к окну просмотра.

2 Он должен быть совместим с большинством настольных браузеров и iPad и легко расширяемым в будущем для других планшетов.

3 Страница должна отображаться по центру (не уверен, достаточно ли места для этого на iPad)

Укажите любые проблемы, которые, по вашему мнению, могут быть вызваны вышеуказанной структурой или CSS.

Пожалуйста, предложите, если мой HTML и CSS-код (особенно контейнер) закодированы правильно ... Я немного настороженно отношусь к тому, чтобы сделать это правильно, поскольку то же самое будет применяться почти к 500+ htmls ...Поэтому мы не хотим вдаваться в какие-либо серьезные проблемы на более позднем этапе ..

Пожалуйста, предложите как можно больше идей ... Я открыт для всех них ..

Спасибо ..

1 Ответ

0 голосов
/ 07 сентября 2011

Вы могли бы сделать это довольно легко с точки зрения гибкости:

(я оставил стили встроенными, потому что сейчас я ленив!) 

    <div id="container" style="width:90%; margin:0 auto; overflow:hidden">
        <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
        <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
    </div>

90%ширина на контейнере составляет 90% от области просмотра.Столбцы будут составлять 50% от расчетной 90% ширины, какой бы она ни была.

Я бы использовал мастер-страницы или аналогичные, поэтому, если вам действительно нужно что-то менять, вам придется применять его на каждой HTML-странице:)

Кроме того, хотя столбцы будут текучими, ваш контент может определить минимальную ширину - например, если у вас есть изображение в одном столбце шириной 500 пикселей, то минимальная ширина этого столбца при изменении размера будет 500 пикселей и может привести кпроблемы.Короче говоря, вам нужно подумать о том, какой тип контента у вас будет на сайте и как это может повлиять на макет.

...