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.
InformationsquelleAutor RMi Flores | 2012-09-12
Schreibe einen Kommentar