Bootstrap：如何使重复的div绕固定div

Question

I'm trying to accomplish the following, make repeated divs "go around" a fixed div. The content of the repeated divs will be created dynamically using Bootstrap thumbnails.

Here's an image that illustrates what i'm trying to do:

How can i do this with CSS (or Javascript, or who knows... Bootstrap)?

Answer 1

You can to it with simple CSS :

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

 <div class="container"> <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

I know tables are a bit out of fashion, however...

<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>

apologies for the border="1" , it's just handy to demo what's going on.