У меня проблема с попыткой заставить CSS работать так, как я этого хочу. Ниже вы найдете 2 фотографии и описание того, как должно выглядеть поведение. Все CSS и контент динамически создаются, поэтому любая форма "гибкости" выполнима, хотя, если это возможно, следует избегать.
RED div имеет динамическую ширину (ширина: авто) и должен быть заполнен связкой BLACK div. Количество черных divs является случайным, или, скорее, зависит от случая к случаю.
Picture1 и Picture2 показывают, как меню должно расширяться, если количество черных divs занимает больше места, чем одна высота (которая фиксируется до 720px). Если понадобится третья колонка, она снова должна быть расширена влево.
Я искал и нашел этот CSS:
#redDiv {
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}
однако есть три проблемы:
- Во-первых, количество столбцов должно быть исправлено таким образом, и мне нужно, чтобы он динамически соответствовал содержимому, которое заполняет его.
- Во-вторых, я не думаю, что это должно быть сделано с динамическими ширинами div, главным образом потому, что разрыв и ширина не имеют смысла там.
- Наконец, даже если я использую javascript для определения количества столбцов, таблица расширяется вправо, и мне нужно, чтобы он расширялся влево, потому что он состыковался с правой стороной экрана, при этом некоторые элементы управления были есть.
EDIT: (js скрипка) ОБНОВЛЕНО
HTML:
<div id="rightdocked">
<div id="RedDiv">
<div class="blackdivs"></div>
<div class="blackdivs"></div>
<div class="blackdivs"></div>
<div class="blackdivs"></div>
<div class="blackdivs"></div>
</div>
</div>
CSS
.blackdivs {
position: relative;
margin-top: 0px;
margin-bottom: 20px;
width: 300px;
height: 40px;
border: solid 2px black;
background-color: white;
}
.blackdivs:first-of-type {
background-color: green;
}
#RedDiv {
max-height: 180px;
width: auto;
z-index: 9;
background-color: lightgreen;
position: relative;
float: left;
background-color: white;
border: 2px red solid;
}
#rightdocked {
position: relative;
width: auto;
height: 300px;
float: right
}
Любые предложения?