2017-05-30 105 views
0

我想停止文字环绕图像下方的环绕,而不对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; 
} 

回答

0

如果你知道div的高度,设置图像的margin-bottom的高度减去图像的高度。

例如,如果div的高度为500px,图像的高度为100px,则使用margin-bottom: 400px

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

你可以尝试上面的答案,或者你可以只更新你的jsfiddle css与下面的CSS。

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

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

请武官验证码

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>