Ich habe ein Layout und ich versuche, in einer Reihe von Bildern, die unterhalb der "gerade angekommen" Abschnitt sitzen und egal, was ich versuche die Bilder fließen unter einander.Responsive Bilder fließen nicht korrekt
Kann jemand sehen, was ich falsch mache? Vielen Dank!
Das liegt daran, <li> Elemente sind standardmäßig display: block. Gib ihnen float: left und du bist fertig.
.wrap {
float: left;
}
Hallo, danke für deinen Vorschlag. Ich habe Float links versucht, aber dann gehen die Bilder nicht in große Kisten, wenn der Bildschirm kleiner gemacht wird, wie die anderen Bilder auf der Seite.Jemand anderes schlug vor, einige divs zu verwenden, und ich habe das versucht, aber die Ränder sind alle aus: https://jsfiddle.net/5cripted/v2qfsnqz/. Ich kann nicht scheinen, dass die gerade angekommenen und die Bilder unten richtig aufgereiht sind. – 5cripted
Sie sind untereinander fließen, da jedes Bild mit einem Blockelement, in diesem Fall ein <div> gewickelt ist. Entfernen Sie das Div oder setzen Sie den Anzeigewert auf inline-block.
Die kleineren Bilder haben jeweils einen Anzeigewert von list-item, der die Objekte wie eine vertikale Liste positioniert.
inline-block
.wrapper {
text-align: left;
}
.wrapper a {
display: inline-block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>Anzeigeblock und schwimmt
/* Clearfix */
.wrapper::after {
content: ''
clear: both;
display: table;
}
.wrapper a {
display: block;
float: left;
}
img {
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>Flexbox
verwenden, wenn Sie nicht alte Versionen von Internet Explorer unterstützen müssen (< 11).
/* Clearfix */
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper a {
width: 50%;
}
img {
/* Stretch the image for demo purposes */
width: 100%;
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>Hallo, danke für deinen Vorschlag. Ich habe Float links versucht, aber dann gehen die Bilder nicht in große Kisten, wenn der Bildschirm kleiner gemacht wird, wie die anderen Bilder auf der Seite. Jemand anderes schlug vor, einige divs zu verwenden, und ich habe das versucht, aber die Ränder sind alle aus: https://jsfiddle.net/5cripted/v2qfsnqz/. Ich kann nicht scheinen, dass die gerade angekommenen und die Bilder unten richtig aufgereiht sind. – 5cripted
@ 5cripted: Hinzugefügt einige Codebeispiele – marvinhagemeister
Ich habe einen kleinen Code für Sie geschrieben. Überprüfen Sie dies.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: auto;
}
div.imagecontainer
{
\t width: 100%;
\t height: auto;
\t
}
div.imagecontainer ul {
\t width: 100%;
\t height: 100%;
\t padding:0;
}
div.imagecontainer ul li{
\t list-style-type: none;
\t width: 20%;
\t height: 200px;
\t float: left;
}
div.imagecontainer ul li img
{
\t width: 100%;
\t height: 100%;
}
</style>
<body>
<div class="imagecontainer">
<ul>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t
</ul>
</div>
<script type="text/javascript">
$(window).resize(function(){
\t //alert("resizing");
var windowWidth = $(window).width();
if(windowWidth < 600)
{
\t $("div.imagecontainer ul li").css({"width":"100%","height":"400px"});
}
else
{
\t $("div.imagecontainer ul li").css({"width":"20%","height":"200px"});
}
});
</script>
</body>
</html>aber ich verwendet, um kleine jquery. Sie können die Bedingungen ändern und ich habe alle intern css ans js verwendet.
andere Sache ist width und heidht und andere Dinge sind abhängig von Ihrem Bedarf ändern Sie diese (Anzahl der Bilder, die Sie in eine Zeile setzen), wie Sie brauchen.
Ich denke, das kann nicht 100% zu Ihrem Bedarf passen. Ich empfehle Bootstrap zu verwenden. Kopieren Sie Vergangenheit und versuchen Sie dies.Hier wird Ihnen dies helfen.
Die Bilder scheinen nicht ihr Seitenverhältnis zu behalten. Sie erscheinen für mich gequetscht. – marvinhagemeister
Mein Code ist unter: https://jsfiddle.net/5cripted/9qyjhjto/2/. Ich versuche, ein Layout ähnlich zu bekommen: https://jsfiddle.net/5cripted/sz4k9pv5/, aber ich kann es nicht zur Arbeit bekommen. – 5cripted