Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div'ы в div

Автор: CmndrAlexGreen 7.7.2011, 22:51

Уважаемые посоветуйте как проще реализовать следующее:

есть <div1> ширина=600 высота=100
в нем нужно разбить пространство на 6 секций: по порядку <div-a> <div-b> <div-a> <div-b> <div-a> <div-b>
А ширина=200 высота=20
В ширина=200 высота=80,
так чтоб В были под А, образовывая тем самым столбик <div-a> + <div-b>, а таких столбиков получается 3

Код


                <div id="1">
                    <div class="a">text</div>
                    <div class="b">text</div>
                    <div class="a">text</div>
                    <div class="b">text</div>
                    <div class="a">text</div>
                    <div class="b">text</div>
                </div>

Код


#1 {width:600px;height:100px;display:block;}
.a {width:200px;height:20px;}
.b {width:200px;height:80px;}

По данному коду: все блоки отображаются по вертикали(вернее текст этих блоков выходит за границы блока-1)
Можно для каждого столба еще див как контейнер сделать и выставить им float но это еще +3 дива(. Или секции бить из списков или span, но тут косяки получаются с эксплоером. Проще сего таблицей), но это же извращение.

Автор: SelenIT 7.7.2011, 23:59

http://chikuyonok.ru/2011/04/inline-vertical-align/?

Автор: CmndrAlexGreen 8.7.2011, 12:35

Возможно)). Щас буду изучать. Спасибо

Автор: CmndrAlexGreen 8.7.2011, 16:41

Почитал. Возникли сомнения насчет полной совместимости с браузерами старого образца, типо ие6, все-таки display: inline-block; как-то им коряво поддерживается.

И имеет ли какое-то значение span'ом ил div'ом делать сами блоки?

Автор: SelenIT 8.7.2011, 17:10

Цитата(CmndrAlexGreen @ 8.7.2011, 16:41

)

сомнения насчет полной совместимости с браузерами старого образца, типо ие6, все-таки display: inline-block; как-то им коряво поддерживается

Настоящие проблемы были только в FF2. У FF3+, Оперы 8+, всех вебкитовых и IE8+ проблем нет, а в IE7- нужное поведение без издержек достигается комбинацией inline + hasLayout (напр. zoom:1). С тех пор, как FF2 потерял актуальность, можно юзать смело.

Цитата

И имеет ли какое-то значение span'ом ил div'ом делать сами блоки?

Я бы делал дивом. Всё-таки, "исконно блочный" элемент в "исконно строчном" — часто искушение для парсера закрыть что-нибудь не там, где надо... ;)