Question

有一个我无法理解......我试图看看是否可以这样做而不必使用jquery或javascript。如果没有其他选择，那么我将采用该解决方案。

我有一个由内嵌块DIV组成的图像库，所有固定大小都是197像素宽。所有这些图像div都包含在一个容器中，并允许最大数量的图像根据浏览器宽度连续显示。我想在此图库的中间添加一个100％宽度的DIV，其中包含Google广告。我希望有这个DIV，以便在它上方完全填充行的完美数量的图像DIV。因为我不知道用户将拥有的屏幕尺寸以及连续的图像数量，我不能指望有5个横跨或2个等等。所以我怎么能拥有在容器DIV的一半处有100％宽度的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查询来执行此操作

Fiddle demo

＆＃13;

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

＆＃13;

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

＆＃13;

这是如何运作的：

首先，flex具有order属性，您可以在其中判断元素应该出现在哪个位置，就像我们总是只能使用固定的标记顺序一样，所以在这里我设置所有{ {1}}到img，这实际上意味着＆＃34;与标记顺序相同＆＃34;和order: 1到goo（最后）。

其次，作为默认设置（对于更广泛的屏幕），我设置了规则order: 2，这使得每个.container .img:nth-of-type(n+6) { order: 3; }从第6个孩子开始获得img，这意味着＆＃ 34;在任何元素之后＃34;订单低于3，在这种情况下包括order: 3元素。

第三，使用goo次查询，在某些断点处，@media数字应该从img移位，并因此在元素显示顺序中移动到最后。

希望这有意义

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'));
    }
});

固定DIV，具有变化的响应DIV

3 个答案: