Fixed DIV mit wechselnden responsiven DIVs

Question

Habe einen, den ich nicht ganz herausfinden kann ... Ich versuche zu sehen, ob dies möglich ist, ohne jquery oder javascript verwenden zu müssen. Wenn es keine andere Option gibt, werde ich auf diese Lösung zurückgreifen.

Ich habe eine Bildergalerie bestehend aus Inline-Block DIVs, alle festen Größe von 197px Breite. Alle diese Bild-Divs sind in einem Container insgesamt enthalten und erlauben die maximale Anzahl von Bildern in einer Reihe basierend auf der Browser-Breite anzuzeigen. Ich möchte etwa in der Mitte dieser Galerie ein DIV mit 100% Breite hinzufügen, das eine Google Anzeige enthalten kann. Ich möchte dieses DIV so haben, dass eine perfekte Anzahl von Bild-DIVs darüber die Zeile komplett ausfüllen. Da ich nicht weiß, welche Bildschirmgröße der Benutzer haben wird und wie viele Bilder in eine Zeile passen, kann ich nicht darauf zählen, dass es 5 across oder 2 across usw. gibt. Wie kann ich also eine Breite von 100% haben? DIV auf halbem Weg den Container-DIV, der darauf reagieren kann, dass immer eine ganze Reihe von Image DIVs darüber steht? Die Galerie selbst hat eine variable Anzahl von Bildern ... einige so niedrig wie 10, manche sogar über 200.

Also im Grunde möchte ich es wie folgt aussehen:

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

Und wenn der Browser geändert wird, so dass es nur in der Lage sind 4 über angezeigt werden, ich nicht dies wollen:

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

würde ich es mag, anstatt dies egal on the fly zu tun, wie der Browser geändert wird:

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

Ich dachte über die Verwendung eines Floats, auf 50% reduziert, aber das schiebt alle DIVs darunter. Ich würde mir Position vorstellen: Absolut würde nicht funktionieren, da es nur die DIVs hinter sich lassen würde. Hat jemand Ideen dazu? Vielen Dank!

Answer 1

Wenn ich Ihre Anforderungen richtig verstanden habe, kann absolute Positionierung Ihr Problem lösen, wenn Sie auch eine max-height auf Ihre Bilder und eine z-index verwenden, um Ihre Anzeige zu platzieren - so etwas?

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

Wenn es mehr als zwei Reihen im Wert von Bildern, vielleicht jQuery verwenden Sie den unteren Rand nur auf die oberste Zeile anzuwenden, so dass Sie keine zusätzlichen Räume erhalten Sie:

$(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 2

I Ich folge dieser Frage von 2 Stunden, es ist eine gute Frage. Ich denke nicht, dass es irgendwelche mit CSS gibt, oder vielleicht weiß ich es nicht, aber ich habe es mit etwas JQuery gemacht.

Hier ist Arbeitsbeispiel: https://jsfiddle.net/7cxe3sek/;

Und hier ist meine komplette Code:

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

Answer 3

Angenommene Markup wie folgt aussieht, können Sie das tun, mit display: flex und @media Abfrage

Fiddle demo

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>

---

Wie funktioniert das:

Erstens, flex hat eine order Eigenschaft, wo Sie erkennen können, in welcher Position ein Element erscheinen sollte, wie wir immer nur mit einer festen Markup-Reihenfolge tun könnten, also hier setze ich alle img auf order: 1, was praktisch bedeutet "wie Markup Bestellung "und die goo bis order: 2 (zuletzt).

Zweitens, und als Standard (für größere Bildschirme), habe ich die Regel .container .img:nth-of-type(n+6) { order: 3; }, die jeden img ab Kind Nummer 6 zu erhalten order: 3 macht, was bedeutet, „nach jedem Element“, die um weniger als 3 hat, die in diesem Fall enthält das goo Element.

Drittens, mit @media Abfragen, an bestimmten Haltepunkten Verschiebung von denen img Nummer sollte order: 3 erhalten und als solche letzte in der Elementanzeige Reihenfolge bewegen.

Hoffnung des Sinn