HTML div sollte eine andere div

vollständig enthalten mein Ziel ist es, einen Vollbild-Overlay-Bild-Slider mit dem Slick-Slider von Kenwheeler zu bauen.HTML div sollte eine andere div

Ich habe bereits die Vollbild-Overlay (Div1), die ein div (Div2) innen und einige Ränder um dieses div.

Nun zu meinem Problem:
Ich mag den Schieber (div3) in div2 unabhängig von der Größe der div2 setzen. Wenn der Schieber mehr Breite und weniger Höhe hat, sollte oben und unten ein größerer Abstand vorhanden sein. Wenn der Schieber mehr Höhe und weniger Breite hat, sollte links und rechts ein größerer Abstand sein.

Das ist, was ich schon habe:

#div1{ 
 
\t position: fixed; 
 
\t display: block; 
 
\t 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t 
 
\t z-index: 9999; 
 
\t 
 
\t background-color: rgba(0,0,0,.7); 
 
} 
 
#div2{ 
 
\t margin: 20px; 
 
\t margin-bottom: 100px; 
 
\t 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t background: green; 
 
\t \t \t \t 
 
\t display: flex; 
 
\t align-items: center; 
 
} 
 
#div3{ 
 
\t width: auto; 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t 
 
    background: blue; 
 
} 
 
#div3 div{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t 
 
\t margin: 0 auto; 
 
} 
 
#div3 div img{ 
 
\t display: block; 
 
\t margin: auto; 
 
\t 
 
\t height: auto; 
 
\t max-height: 100%; 
 
\t 
 
\t width: auto; 
 
\t max-width: 100%; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
    \t <div id="div3"> 
 
    \t \t <div><img src="images/models/own/001_racecar/P02.png" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P03.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P04.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P05.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P06.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P07.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P08.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P09.JPG" alt=""></div> 
 
    \t </div> 
 
    </div> 
 
</div>

Ich weiß, dass ich bin nicht sehr gut zu erklären. Also, wenn Sie Fragen haben, fragen Sie mich einfach.
Ich hoffe, dass Sie mir helfen können.

Dank
Tobias Wälde

Quelle

2017-07-21 Tobias Wälde

Hallo Tobias, wir brauchen ein Beispiel für deinen Code um zu helfen. –

Ich habe meine Frage bearbeitet und ein Code-Snippet hinzugefügt –

Sorry, wenn ich Sie falsch verstanden, aber was wollen Sie ist sicher zu stellen, dass Schieber immer innerhalb des übergeordneten div heißt div2 in Ihrem Fall ist und div2 mit dem Inhalt des Gleiters wachsen sollte. Habe ich recht?

Sie können es tun, indem Sie die Klasse "container" des Bootstrap verwenden. Ich habe ein einfaches Spiel dafür gemacht. Lass mich wissen ob es funktioniert.

https://jsfiddle.net/94kt3mwd/1/

<div id="div1" class="container col-lg-12 col-sm-12 col-xs-12 col-md-12" style= "background-color:#ff0;padding:2%"> 
    <div id="div2" class="container" style="background-color:#00f" align="center"> 
    <h1> 
    HELLO! Add Text Here.. 
    </h1> 
    </div> 
</div>

Hoffe, es hilft.

Quelle

2017-07-21 02:44:16

Ich habe meine Frage bearbeitet und ein Code-Snippet hinzugefügt –

HTML div sollte eine andere div

Antwort

Verwandte Themen