2列之間浮動圖像

Question

我有問題。是否存在與「float：center」相似的東西？ 我正在嘗試製作2列文字，並且我想在它們底部之間有一個圖像......但不像在我的示例中。我想讓它漂浮。

感謝您的回答。

.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

把你的圖片在柱上，並使其位置的底部通過使父：

position: relative; 

和孩子

position: absolute; 
bottom: 0; 

看到的片段以下是結果：

.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

在回答你的問題，有沒有這樣的事情float:center;

在您的例子而言，我認爲這是你正在嘗試做的事：

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

在代碼片段中，我從<p>標記中刪除了column這一類，並將每列都放在它自己的<div>之內。這會導致圖像充當自己的列。

我還刪除了display:inline-block並將float:left添加到列類以確保列出現在彼此旁邊。