停止在圖像下方環繞文字

Question

我想停止文字環繞圖像下方的環繞，而不對HTML進行任何更改。這可以完全由CSS完成嗎？我知道文本可以包裝在一個div中，但我無法在Wordpress上做到這一點。

的jsfiddle：https://jsfiddle.net/s01x1ere/

HTML

<div> 
    <p> 
    <a href="amazon.com"><img src="https://www.easycalculation.com/area/images/big-square.gif"></a> 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    </p> 

</div> 

CSS

div { 
    width:500px; 
} 

img { 
    float:left; 
    height:100px; 
    width:100px; 
} 

Answer 1

如果你知道div的高度，設置圖像的margin-bottom的高度減去圖像的高度。

例如，如果div的高度爲500px，圖像的高度爲100px，則使用margin-bottom: 400px。

img { 
    float: left; 
    height: 100px; 
    width: 100px; 
    margin-bottom: 400px; 
} 

Answer 2

你可以嘗試上面的答案，或者你可以只更新你的jsfiddle css與下面的CSS。

div { 
    width:500px; 
    position:relative; 
    padding-left:100px; 
} 

img { 
    height:100px; 
    width:100px; 
    position:absolute; 
    left:0; 
} 

Answer 3

請武官驗證碼

div { width:500px; } 
 
img { float:left; height:100px; width:100px; margin-right: 15px;} 
 
p { display: flex; }

<div> 
 
      <p> 
 
       <a href="amazon.com"><img src="https://www.easycalculation.com/area/images/big-square.gif"></a> 
 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
      </p> 
 
     </div>