如何在兩列中的圖像周圍流動文本？

-4

例如，在兩列圖像，在「中心」列中的一個圖片，並在右列其中一些。我嘗試通過顯示「浮動框」：inline-block;我使用display：table/display：table-cell嘗試了一個類似於表格的配置，但是我無法爲左側的文本提供正確的（變化的）寬度。

（文字與中心圖像的倒數第二個parag的表觀排列是沒有必要的。）

感謝您的幫助！

來源

2017-09-13 murspieg

只需使用'浮動：大圖片上right' ...？ – Terry

您是否嘗試過使用Bootstrap？ https://getbootstrap.com/ –

@DiegoRosales Bootstap對此是一種矯枉過正。特里正確地提到了「float：right」，這就是它所需要的。 – Simon

這是一個使用float的演示 - 這是否實現了你想要的？

.column { 
 
    float: right; 
 
} 
 

 
.column img { 
 
    clear: both; 
 
    float: right; 
 
    margin: 5px; 
 
}

<div class="column"> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
</div> 
 

 
<div class="column"> 
 
    <img src="http://via.placeholder.com/200x200" /> 
 
</div> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>

來源

2017-09-13 21:27:38

Tnx提供了一個代碼片段，完美工作 - 我不知道如何使用「清除」。問題：爲什麼需要'.column'的兩個聲明？爲什麼這個單一規格失敗？ '.column { float：right; 明確：都 }' – murspieg

@murspieg第二個聲明是在列內的圖像，而不是列。他們正在被「清除」，因此他們留在他們的特定專欄而不是溢出。 –

如何在兩列中的圖像周圍流動文本？

回答

相關問題