Question

我想阻止文字在图片下方包裹，而不对HTML进行任何更改。这可以完全由CSS完成吗？我知道文本可以包含在div中，但是我无法在Wordpress上执行此操作。

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

你可以试试上面的答案，或者你可以用下面的css更新你的jsfiddle css。

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

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

Answer 2

如果您知道div的高度，请将图像的margin-bottom设置为高度减去图像的高度。

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

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

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>

阻止文字在图像

3 个答案: