Загрузочный лоток: как сделать повторные divs обходить фиксированный div

Question

Я пытаюсь выполнить следующее, сделать повторные divs «обойти» фиксированный div. Содержимое повторяющихся divs будет создано динамически с использованием миниатюр Bootstrap.

Вот изображение, которое иллюстрирует то, что я пытаюсь сделать:

Как я могу сделать это с помощью CSS (или Javascript, или кто знает ... Bootstrap)?

Answer 1

Вы можете к нему с простой CSS:

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    background: #2ecc71; 
 
    \t width: 460px; 
 
    \t height: 460px; 
 
    \t margin: 10px; 
 
    float: right; 
 
} 
 
.item { 
 
    background: #e74c3c; 
 
    width: 220px; 
 
    \t height: 220px; 
 
    \t margin: 10px; 
 
    float: left; 
 
}

<div class="container"> 
 
    
 
    \t <div class="block"></div> 
 
    
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    
 
</div>

Answer 2

Я знаю, что столы немного из моды, однако ...

<table border="1" style="width:300px;"> 
<tr> 
    <td>1</td> 
    <td>2</td>  
    <td rowspan="2" colspan="2">hello</td> 
    </tr> 
<tr> 
    <td>3</td> 
    <td>4</td>   
</tr> 
<tr> 
    <td>5</td> 
    <td>6</td>   
    <td>7</td> 
    <td>8</td> 
</tr> 
</table> 

извинения за border="1", это просто удобно для демонстрации того, что происходит.