Поверните вертикально выровненные столбцы div как?

У меня есть «контейнер» div, который будет состыкован с левой стороны страницы и всегда будет 10px сверху, слева и внизу. Внутри этого div будет 10 маленьких «внутренних» divs, которые расположены вертикально. Контейнер всегда должен быть достаточно широким, чтобы удерживать все внутренние div.Поверните вертикально выровненные столбцы div как?

Вот что ... всякий раз, когда контейнер div не может удерживать все внутренние div в одном столбце (например, когда пользователь уменьшает их высоту браузера), я хочу, чтобы внутренние divs расширялись до нового столбца "(но все еще остаются внутри контейнера div). Другими словами, контейнер div будет расширяться горизонтально по мере необходимости, чтобы никогда не появлялись вертикальные полосы прокрутки.

Например, если высота браузера только идет вниз DIV 7, то это должно выглядеть следующим образом ...

Вот jsFiddle того, что у меня до сих пор ...

http://jsfiddle.net/ymESU/

А вот код ...

<!DOCTYPE html> 
<html> 

<head> 

<style> 
    #container {position: absolute; top: 10px; left: 10px; bottom: 10px; border: 1px solid black; padding: 5px; } 
    .innerBoxes {display: block; width: 100px; height: 100px; background: red; margin: 5px; padding: 10px; color: white;} 
</style> 

</head> 

<body> 

<div id="container"> 
    <div class='innerBoxes'>1</div> 
    <div class='innerBoxes'>2</div> 
    <div class='innerBoxes'>3</div> 
    <div class='innerBoxes'>4</div> 
    <div class='innerBoxes'>5</div> 
    <div class='innerBoxes'>6</div> 
    <div class='innerBoxes'>7</div> 
    <div class='innerBoxes'>8</div> 
    <div class='innerBoxes'>9</div> 
    <div class='innerBoxes'>10</div> 
</div> 

</body> 
</html>

Что я Мне не хватает этого?

FYI- Для этого конкретного проекта он должен работать только в современных версиях Chrome, поэтому, если для лучшего решения требуется CSS3, проблем нет.

источник

2013-04-22 NotQuiteThereYet

Я не подумайте, что есть чисто-CSS способ сделать это. Вероятно, вам придется использовать какой-то вкус JavaScript. –

CSS - это язык стиля, не способный принимать решения. Поскольку @RoddyoftheFrozenPeas сказал, что для этого вам понадобится хорошая часть javascript. –

Если вы используете только браузер, Chrome, то вы можете использовать столбцы CSS3. Используйте инлайн-блоки вместо поплавков:

#container {position: absolute; 
    top: 10px; left: 10px; bottom: 10px; 
    border: 1px solid black; padding: 5px; 
    -webkit-column-width:120px; -moz-column-width:120px; 
    } 
.innerBoxes { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin: 5px; 
    padding: 10px; 
    color: white; 
}

Здесь он работает в скрипкой: http://jsfiddle.net/GHMb8/2/

обновление работает в Firefox тоже, если вы добавите -moz-column-width:120px; (новая скрипка)

источник

2013-04-22 20:27:42 Faust

Спасибо Faust, но внутренний div должен быть расположен вертикально (они расположены горизонтально в вашем примере). Возможно ли это сделать? – NotQuiteThereYet

элементы должны быть выровнены по вертикали сначала, а затем горизонтально – Ejaz

Вы ищете в Chrome? Они расположены вертикально, во-первых, в Chrome. – Faust

Поверните вертикально выровненные столбцы div как?

ответ

Смежные вопросы