Hinzufügen einer Kopfzeile nach Bildern in einem Bildcontainer

Ich habe 3 Bilder in einer Reihe mit etwas Text überlagert die Bilder. Ich möchte eine neue Kopfzeile unterhalb dieser Bilder mit dem üblichen Platz über der Kopfzeile (zwischen den Bildern und der Kopfzeile). Ich habe versucht, eine neue Zeile sowie ein div zum Titel hinzuzufügen, um es zu füllen, aber es scheint, dass der Titel mit den Bildern über ihm ausgerichtet bleiben will.Hinzufügen einer Kopfzeile nach Bildern in einem Bildcontainer

Erstellt hier ein Beispiel, um das Problem zu illustrieren, das ich mit dem "2. Titel" habe, der zwischen ihm und den Bildern Platz darüber haben muss. https://jsfiddle.net/wb7t5718/1/

hier Code

.imagecontainer { 
 
    display: inline-block; 
 
    float: left; 
 
    /* important */ 
 
    position: relative; 
 
    /* important(so we can absolutely position the description div */ 
 
    padding-right: 12px; 
 
} 
 
.description { 
 
    position: absolute; 
 
    /* absolute position (so we can position it where we want)*/ 
 
    bottom: 0px; 
 
    /* position will be on bottom */ 
 
    left: 0px; 
 
    width: 220px; 
 
    background-color: black; 
 
    font-family: 'tahoma'; 
 
    font-size: 15px; 
 
    color: white; 
 
    opacity: 0.6; 
 
    /* transparency */ 
 
    filter: alpha(opacity=60); 
 
    /* IE transparency */ 
 
} 
 
.description a { 
 
    color: white; 
 
} 
 
p.description_content { 
 
    padding: 10px; 
 
    margin: 0px; 
 
}

<h3>First title</h3> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <h3>Second title needs to be below pictures with space above it</h3> 
 
</div>

Quelle

2016-08-30 AndyB

Ich verstehe nicht, was Sie wollen, aber ich denke, Sie werden nicht diese mögen: https://jsfiddle.net/wb7t5718/2/ –

perfekt, danke! – AndyB

Einfach gesagt, die "br" obige Beschreibung Klasse.

<h3>First title</h3> 
     <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
    <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
    <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
<div class="row"> 
<h3>Second title needs to be below pictures with space above it</h3> 
</div>

Quelle

2016-08-30 05:46:36

@AndyB bitte probieren Sie es aus und lassen Sie es mich wissen. –

Entfernen Sie einfach float: left;-.imagecontainer und versuchen ..

Quelle

2016-08-30 05:49:01

Nur clear:both-.row Klasse hinzufügen Floating von div zu löschen. und fügen Sie margin/padding top hinzu, um den Abstand oben zu erhalten.

.row{ 
    clear:both; 
    padding-top:5px; 
}

Quelle

2016-08-30 06:20:02

Hinzufügen einer Kopfzeile nach Bildern in einem Bildcontainer

Antwort

Verwandte Themen