Wie display inline-Bilder
Habe ich ein Navigations-div mit drei Bildern. Jedes Bild hat einen Titel, element absolut positioniert am unteren Rand des Bildes. Ich bin versuchen, um alle drei Bilder nebeneinander, auf der gleichen Linie, aber die Bilder werden als Blöcke angezeigt. Ich bin neu auf dieses Zeug. Also vielen Dank im Voraus für die Hilfe!
HTML:
<div class = "nav">
<div class = "container">
<div class = "image">
<img src = "img1">
</div>
<div class = "title">
<p> text1 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img2">
</div>
<div class = "title">
<p> text2 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img3">
</div>
<div class = "title">
<p> text3 </p>
</div>
</div>
</div>
CSS:
.nav {
display: inline;
}
.container {
position: relative;
width: 100%;
}
.image img {
width: 30%;
height: 4.5in;
}
.title {
width: 30%;
position: absolute;
bottom: 0; left: 0;
}
- Versuchen
display: inline-block;
. - ... Sie haben zur Unterstützung von IE7?
- CSS Image Gallery-Beispiel: w3schools.com/css/css_image_gallery.asp
- Diese Frage sollten sich Fragen, wie die Anzeige
<div>
's inline, nicht<img>
's, und ist daher nicht hilfreich, um jemand auf der Suche nach diesem bestimmten Lösung.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie fixieren Sie Ihre HTML-code zuerst.
ist es
<div class = "title">
und nicht<div class = "title>
Fehlen die " am Ende der einzelnen Titel.dann fügen Sie schwimmen, um Ihre Behälter und setzen Sie eine Breite von 30%. Weil Sie wollen, dass Ihr Bild 30% der Breite Recht.
Als Sie 3 mal container, die Sie fordern 100% X 3 ausgerichtet werden,
schaffen auch eine image-Klasse in der CSS mit float in ihm.
Und zu schließen, ändern Sie die Breite Ihres .Bild img in der CSS bei 100%, die Art und Weise es wird 100% statt der 30% - container erlaubt.
Ihre Bilder bereits eingestellt sind inline, das Problem ist, Ihre Eltern nicht. Sie benötigen dieses:
Es ist erwähnenswert, dass haben Sie einige markup, das Sie wahrscheinlich nicht wirklich brauchen,
Ersetzt werden könnte, mit dabei:
Oder so:
-snip-