固定DIV与移位响应DIV

Question

有一个我不太清楚的...我试图看看是否有可能不必使用jquery或javascript来做到这一点。 如果没有其他选择，那么我将采用该解决方案。

我有一个由内嵌块DIV组成的图片库，它们的固定大小均为197px宽度。 所有这些图像div总体上都包含在一个容器中，并允许基于浏览器宽度在一行中显示最大数量的图像。 我想在此图库的中间添加一个100％宽度的DIV，其中可以包含Google广告。 我想拥有这个DIV，以便在其上方有完美数量的图像DIV完全填满该行。 因为我不知道用户将拥有什么屏幕尺寸以及一行中可以容纳多少图像，所以我不能指望有5个或2个，等等。那么我怎么能有100％的宽度DIV在容器DIV的一半下方，可以始终确保在其上方有整行的图像DIV吗？ 画廊本身具有可变数量的图像……有些低至10张，有些多达200多张。

所以基本上，我希望它看起来像这样：

[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4] [IMAGE5]    
[ GOOGLE AD DIV ---------------------------]

而且，如果调整了浏览器的大小，使其只能显示4个，我不希望这样：

[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4]
[IMAGE5]    
[ GOOGLE AD DIV ------------------]

无论浏览器如何调整大小，我都希望它能即时执行：

[IMAGE1] [IMAGE2] [IMAGE3] [IMAGE4]
[ GOOGLE AD DIV ------------------]
[IMAGE5]    

我考虑过使用一个浮点数，将其降低50％，但这会将所有DIV推到其下方。 我会想象位置：绝对不会起作用，因为它将DIV放在后面。 有人对此有任何想法吗？ 谢谢！

Answer 1

假设您的标记看起来像这样，则可以使用display: flex和@media查询

小提琴演示

 html, body { margin: 0; } .container { display: flex; flex-wrap: wrap; } .container .img { height: 70px; width: 197px; background: red; border: 2px solid white; box-sizing: border-box; order: 1; } .container .goo { height: 70px; width: 100%; border: 2px solid white; box-sizing: border-box; background: yellow; order: 2; } .container .img:nth-of-type(n+6) { background: green; order: 3; } @media screen and (max-width: 980px) { .container .img:nth-of-type(n+5) { background: green; order: 3; } } @media screen and (max-width: 787px) { .container .img:nth-of-type(n+4) { background: green; order: 3; } } @media screen and (max-width: 590px) { .container .img:nth-of-type(n+3) { background: green; order: 3; } } @media screen and (max-width: 394px) { .container .img:nth-of-type(n+2) { background: green; order: 3; } } 

 <div class="container"> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="img"></div> <div class="goo">Goo Ad</div> </div> 

---

这是如何运作的：

首先， flex具有order属性，您可以在其中确定元素应显示在哪个位置，就像我们总是只能以固定的标记顺序执行操作一样，因此在这里我将所有img设置为order: 1 ，实际上意味着“与标记顺序”和goo到order: 2 （最后一个）。

其次，作为默认设置（适用于更大的屏幕），我设置规则.container .img:nth-of-type(n+6) { order: 3; } .container .img:nth-of-type(n+6) { order: 3; } ，使每个img从子编号6开始获得order: 3 ，这意味着“在任何元素之后”的顺序低于3，在这种情况下，该元素包含goo元素。

第三，使用@media查询，在某些断点处，应从其img号获得order: 3移位order: 3并因此在元素显示顺序中最后移动。

希望这有意义

Answer 2

如果我正确理解了您的要求，并且您还可以在图片上使用max-height和z-index来将广告放在最前面，则绝对定位可以解决您的问题-像这样吗？

<style>
.img {
width: 197px;
margin-bottom: 75px;
max-height: 100px;
clear: both;
z-index: 0;
}

.ad {
position: fixed;
height: 50px;
top: 120px;
left: 8;
width: 99%;
z-index: 1;
border: 1px solid black;
}

</style>

<div class="container">
<img src="myImg" class="img" />
<img src="myImg" class="img" />
<img src="myImg" class="img" />
<img src="myImg" class="img" />
<div class="ad">Google Ad </div>
<img src="myImg" class="img" />
<img src="myImg" class="img" />
<img src="myImg" class="img" />
<img src="myImg" class="img" />
</div>

如果图像的行数超过两行，则可以使用jQuery将底部边距仅应用于顶部行，这样就不会获得多余的空间：

$(document).ready(function(){
addClass();
});

$(window).resize(function(){
addClass();
});

function addClass() {
var i = 0;
var width = Math.floor($(window).width() / 197);
$('.img').each(function(){
$(this).removeClass('topImg');
if (i < width) {
$(this).addClass('topImg');
}
i++;
});
}

CSS

width: 197px;
max-height: 100px;
clear: both;
z-index: 0;
}

.topImg {
margin-bottom: 75px;
}

.ad {
position: fixed;
height: 50px;
top: 120px;
left: 8;
width: 99%;
z-index: 1;
border: 1px solid black;
}

https://jsfiddle.net/mt7godbb/2/

Answer 3

我从2个小时开始关注这个问题，这是一个很好的问题。 我不认为有任何与CSS或也许我不知道，但我做了一些jQuery的。

这是工作示例： https : //jsfiddle.net/7cxe3sek/ ;

这是我完整的代码：

HTML

<div class="main">
    <div class="small_block"></div>
    <div class="small_block"></div>
    <div class="small_block"></div>
    <div class="small_block"></div>
    <div class="small_block"></div>
    <div class="full_block"></div>
</div>

CSS

body{
  padding:0;
  margin:0;
}
.main{
  font-size:0;
}
.small_block{
  background:#000;
  width:197px;
  height:20px;
  display:inline-block;
}
.full_block{
  width:100%;
  height:100px;
  background:#ff0000;
}

JS

$(window).resize(function(){
    var windowWidth = $(window).width();
    var boxWidth = $('.small_block').width();
    var boxLength = $('.small_block').length;
    var longBox = "<div class=\"full_block\"></div>"
    var visibleValue = windowWidth/boxWidth;
    var visibleDiv = visibleValue.toString().split('.')[0];
    if(boxLength>visibleDiv){
        $('.full_block').remove();
        $(longBox).insertAfter($('.small_block').eq(visibleDiv-1));
    } else {
        $('.full_block').remove();
        $(longBox).insertAfter($('.small_block:last'));
    }
});