Question

我正在建立一个内容为小div的网站。它们都是左侧浮动所以基本上它都是平铺的。我想要每隔三排一个横幅。可见的内容div数取决于用户的屏幕宽度。我有一个JavaScript解决方案，但IE不喜欢它。

更多图形：这就是我想要的：

narrow screen

在更广泛的屏幕上，事情应该是这样的：

enter image description here

Answer 1

这就是我提出的：

预览：http://jsfiddle.net/Yqy9B/5/embedded/result/

<div class="row clear">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="row clear">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="advert">
    Advertisement
</div>

.row {
    height:80px; /*height = 10px margin(top/bottom) + 60px height of .box */
    overflow: hidden;
}

.box {
    width:160px;
    height:60px;
    float:left;
    background:#999;
    margin:10px;
    display:inline;
}

.advert {
    width:485px;
    height:60px;
    margin:10px auto;
    background:red;
    text-align:center;
    line-height:60px;
}

.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; }  /* For IE 6/7 (trigger hasLayout) */

这就是你在说什么？ http://jsfiddle.net/Yqy9B/5/

Answer 2

<强>更新对于Chrome和Safari中的重叠问题，我添加了一些代码，这些代码会为这些浏览器添加一些填充，因为我找不到更优雅的跨浏览器解决方案。要查看包含其他代码的版本，请参阅http://jsfiddle.net/Yqy9B/16/。我还更新了以下代码。

在CSS中使用clear:和float:属性的组合，我们可以将广告放在一边，将内容放在另一边。这将允许内容围绕广告流动，这将使广告在调整大小时保持在同一位置，但流动其下方的内容框。

以下是一个示例：http://jsfiddle.net/cjyoung1/Yqy9B/10/（更新：解决重叠的新示例：http://jsfiddle.net/Yqy9B/16/）

（注意：我将间隔红色显示为红色以显示其工作原理，您可以将其更改为背景颜色或透明 - 但需要至少1px宽才能在某些浏览器中正常工作）

CSS：

.box {
    width:160px;
    height:60px;
    margin:10px;
    background:#999;
    display:inline-block;
}

.advert {
    width:100%;
    height:60px;
    margin:10px auto;
    background:red;
    text-align:center;
    line-height:60px;
    display:block;
    float:right;
    clear:right;
}

.spacer { 
    float:right; 
    clear: right; 
    height: 250px; 
    width: 1px; 
    background: #f00;
}

/* **Below are the updates to fix the overlap in other browsers** */
/* fix webkit overlap */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .advert{
        margin-top:80px;
    }
    .spacer{
        margin-bottom:-80px;     
    }
}

/* fix IE6 overlap */
* html .advert {
    margin-top: 40px;
}

HTML：

<!-- floating to right -->
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<span class="spacer"></span>
<span class="advert">Advertisement</span>

<!-- floating to left -->   
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>

Float divs围绕'静态'

2 个答案: