Floating image between 2 columns

Question

J'ai une question. Est-ce que quelque chose simillar à "float: center" existe? J'essaie de faire 2 colonnes de texte et je veux avoir une image entre eux en bas ... Mais pas comme dans mon exemple. Je voudrais l'avoir flotté.

Merci pour les réponses.

.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

Mettre votre image dans une colonne et le positionner au fond en faisant le parent:

position: relative; 

et l'enfant

position: absolute; 
bottom: 0; 

Voir l'extrait ci-dessous pour le résultat:

.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

En réponse à votre question, il n'y a pas une telle chose comme float:center;

En ce qui concerne votre exemple, je pense que c'est ce que vous essayez de faire:

.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>

Dans l'extrait, j'ai supprimé la classe column de vos balises <p>, et j'ai placé à la place chaque colonne à l'intérieur de la <div>. Cela provoque l'image à agir comme sa propre colonne.

J'ai également retiré le display:inline-block et ajouté float:left à la classe de colonne pour assurer que les colonnes apparaissent côte à côte.