Организация диванов в контейнере

Question

Я флорист по профессии, поэтому я был так же удивлен, как и вы, когда мои знания цветочных композиций не переводятся на стили html div. Возможно, вы можете помочь.

Вот HTML:

<div id="blocks"> 
    <div id="block0"></div> 
    <div id="block1"></div> 
    <div id="block2"></div> 
    <div id="block3"></div> 
    <div id="block4"></div> 
    <div id="block5"></div> 
</div> 

А вот стиль:

div { 
    outline: solid 1px black; 
} 
#blocks { 
    width:80%; 
    height:500px; 
    margin:0 auto; 
    background-color: #ffe; 
} 

#block0 { 
    height:10%; 
    width:100%; 
    background: red; 
    float: left; 
} 

#block1 { 
    height:10%; 
    width:25%; 
    background: orange; 
    float: left; 
} 

#block2 { 
    height:90%; 
    width:50%; 
    background: cyan; 
    float:left; 
} 

#block3 { 
    height:45%; 
    width:25%; 
    background: yellow; 
    float: right; 
} 

#block4 { 
    height:45%; 
    width:25%; 
    background: green; 
    float: left; 
} 

#block5 { 
    height:80%; 
    width:25%; 
    background: magenta; 
    float: left; 
} 

Я хотел бы в верхней части block5 скользить прямо на дно block1 и объяснение его поведение. Спасибо.

Here является скрипкой для этого

Answer 1

Другими словами, block5 происходит под потому что вы уже использовали все доступные ширины пространства с предыдущим блоки. Вы можете связать это с вашей работой: если вы поместите свои цветочные горшки на край вашего балкона, и места недостаточно, последний банк падает поверх чьей-то головы.

Чтобы избежать этого, вы можете создавать полки, сделанные с другими разделителями. Вот краткая попытка вашего кода. С небольшой преданностью вы можете получить ее лучше.

div {outline: solid 1px black} 
 
#blocks { 
 
width:80%; 
 
margin:0 auto; 
 
background-color: #ffe; 
 
} 
 
#shelve1,#shelve2,#shelve3{display:inline-block} 
 
#shelve1 {width:21%} 
 
#shelve2 {width:56%} 
 
#shelve3 {width:21%} 
 
#block0 { 
 
height:50px; 
 
background: red; 
 
display:block 
 
} 
 
#block1 {height:50px;background: orange} 
 
#block2 {height:450px;background: cyan} 
 
#block3 {height:225px;background: yellow} 
 
#block4 {height:225px;background: green} 
 
#block5 {height:400px;background: magenta}

<div id="blocks"> 
 
<div id="block0"></div> 
 
<div id="shelve1"> 
 
<div id="block1"></div> 
 
<div id="block5"></div> 
 
</div> 
 
<div id="shelve2"> 
 
<div id="block2"></div> 
 
</div> 
 
<div id="shelve3"> 
 
<div id="block3"></div> 
 
<div id="block4"></div> 
 
</div> 
 
</div>

В настоящее время, это также не то, что хорошая идея, чтобы разместить горшки на плавающем лоток, с порывами ветра все они будут падать вниз. CSS Tricks объясняет, почему и рекомендует использовать дисплей .

Answer 2

Это будет дно beacuse вы всплывали влево несколько элементов, которые до вашего блока 5. Вы можете снять поплавок: слева от блока 5, установить положение : относительная и верхней части: 20% (это поместит блок 5 20% сверху относительно емкости блоков)

#block5 { 
    height:80%; 
    width:25%; 
    background: magenta; 
    position: relative; 
    top: 20%; 
    }