Floating Bild zwischen 2 Spalten

Question

Ich habe eine Frage. Gibt es etwas Similar zu "float: center"? Ich versuche, 2 Spalten Text zu machen, und ich möchte ein Bild zwischen ihnen auf der Unterseite haben ... Aber nicht wie in meinem Beispiel. Ich möchte es schweben lassen.

Danke für die Antworten.

.column{ 
 
    display:inline-block; 
 
    width: 150px; 
 
    margin-right: 10px; 
 
} 
 
.photo{ 
 
    width: 150px; 
 
}

<p class="column"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam 
 
</p> 
 
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo"> 
 
<p class="column"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam 
 
</p>

Answer 1

Setzen Sie Ihr Bild in einer Spalte und positionieren Sie es auf den Boden, indem die Eltern machen:

position: relative; 

und das Kind

position: absolute; 
bottom: 0; 

Siehe Schnipsel unten für das Ergebnis:

.column{ 
 
    display:inline-block; 
 
    position: relative; 
 
    width: 150px; 
 
    margin-right: 10px; 
 
} 
 
.column img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 150px; 
 
}

<p class="column"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam 
 
</p> 
 
<p class="column"> 
 
<img src="http://www.matmasar.wz.cz/foto.jpg"> 
 
</p> 
 
<p class="column"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam 
 
</p>

Answer 2

In Antwort auf Ihre Frage, gibt es nicht so etwas wie float:center;

In Bezug auf Ihrem Beispiel, ich denke, das ist, was Sie zu tun versuchen:

.column{ 
 
    float:left; 
 
    width: 150px; 
 
    margin-right: 10px; 
 
} 
 
.photo{ 
 
    width: 150px; 
 
}

<div class="column"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p> 
 
</div> 
 
<div class="column"> 
 
    <img src="http://www.matmasar.wz.cz/foto.jpg" class="photo"> 
 
</div> 
 
<div class="column"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p> 
 
</div>

Im Snippet habe ich die Klasse column von Ihren <p> Tags entfernt und stattdessen jede Spalte in ihre eigene <div> eingefügt. Dies bewirkt, dass das Bild als eigene Spalte fungiert.

Ich entfernte auch die display:inline-block und fügte float:left zu der Spalte-Klasse hinzu, um sicherzustellen, dass Spalten nebeneinander erscheinen.