javascript - Bootstrap : How to make repeated divs go around a fixed div

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

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

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

我如何使用 CSS(或 Javascript,或者谁知道... Bootstrap)做到这一点?

最佳答案

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

关于javascript - Bootstrap : How to make repeated divs go around a fixed div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21715559/

相关文章:

javascript - .fadein 与 javascript

javascript - 将 CSS 和 JavaScript 组合成一个文件并链接它

javascript - 使用 D3 为 svg 填充背景图像

javascript - 使用 Jq 图和 JSON 创建饼图

html - FireFox 中 iFrame 高度问题的修复方法是什么?

jquery - Bootstrap 弹出框边框 CSS

php - WordPress Customizer API (Kirki) - Repeater Image

html - 背景图像扩展到整个侧边栏的部分

javascript - 在 Bootstrap 中单击按钮,如何切换导航类?

css - Bootstrap 轮播 - 调整溢出隐藏