Диваны CSS / HTML Layout для размещения в div с фиксированной высотой - PullRequest
Новая
       5

Диваны CSS / HTML Layout для размещения в div с фиксированной высотой

0 голосов
/ 11 августа 2011

Я новичок в CSS и пытаюсь создать что-то необычное.

Мой код: 

<body>
<div style="background-color:#C1C1C1; height:100%;">
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div1
    </div>
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div2
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div3
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div4
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div5
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div6
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div7
    </div>
</div>
</body>

Допустим, экран имеет высоту 250px -> высота основного div будет 250pxтоже тогда.

Результат: 

div1
div2
div3
...

Я знаю, что параметр float: left;отобразит их как 

div1 div2 div3 div4 div5 ....

Я хотел бы получить: 

div1 div3 div5 div7
div2 div4 div6

Это похоже на горизонтальную галерею.Кроме того, когда будет больше div, можно ли сделать переменную ширины основного div и добавить полосу прокрутки x?

Это должно работать только в Internet Explorer 7 и выше.Также, JavaScript является опцией.

Заранее спасибо!

1 Ответ

1 голос
/ 11 августа 2011

То, что вы пытаетесь достичь, довольно просто с CSS3: http://jsfiddle.net/Ykkyg/

Эта скрипка предоставляет для него стандартный CSS и специфичные для движка свойства Webkit (Safari, Chrome) и Gecko (Firefox).

Однако у этого подхода есть несколько проблем:

  • Во-первых, IE не поддерживает его .
  • Во-вторых, Если этот набор столбцов становится выше окна браузера, вы заставите своего пользователя прокручивать вверх и вниз, чтобы прочитать только один непрерывный фрагмент текста.Это отстой.

Без CSS3 вы можете добиться этого эффекта, аккуратно определив размеры всех элементов априори, но это не масштабируется, и, боюсь, я знаю, что нетобщее решение проблемы, которое не включает в себя некоторый нетривиальный JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...