Bootstrap:如何使重复的div绕过固定的div

时间:2014-02-11 23:37:32

标签: javascript css twitter-bootstrap twitter-bootstrap-3

我正在尝试完成以下操作,使重复的​​div“绕过”一个固定的div。重复div的内容将使用Bootstrap缩略图动态创建。

这是一张图片,展示了我正在尝试做的事情: a busy cat

我如何使用CSS(或Javascript,或谁知道...... Bootstrap)?

2 个答案:

答案 0 :(得分:2)

你可以用简单的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>

答案 1 :(得分:0)

我知道桌子有点不合时宜,但是......

<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"道歉,只是为了演示正在发生的事情。