如何在图像后立即修复边距

Question

这是我页面的截图：

我的问题是我希望图像后的缩进与图像前的缩进相同 - 换句话说，红色轮廓部分不存在。

Here 是我的代码的 JSFiddle。

CSS:

img {
    float: left;
    margin-right: 20px;
}

HTML（删除重复）：

<img src="http://www.kimtradings.co.uk/ekmps/shops/kimtrading/images/e-shisha-liquid-coffe-flavour-6301-p.jpg" 
    width="150px" height="150px">
We are the only network that guarantees to grow your channel from day ONE, even for small channels!
Our network will <b>help you get a minimum of 5 new subscribers per day as soon as you join us!

Answer 1

有以下几种解决方法：

1. 只需添加一个巨大的 padding-bottom

img {
    float: left;
    margin-right: 20px;
    padding-bottom:2000px;
}

到你的图片。这是一个厚颜无耻的解决方案。

已更新 fiddle：http://jsfiddle.net/tp83febk/1/

2. 或者您可以尝试在文本中添加 padding-left。为此，您必须将文本包装在 div 中并添加以下内容：

div {
    padding-left: 180px;
}

已更新 fiddle：http://jsfiddle.net/tp83febk/4/

但是，我建议您坚持使用选项 2，因为选项 1 不是很兼容。

Answer 2

你可以用一个容器带显示块，用2个div带浮点数

<div style="display: block;">
        <div style="float: left; width: 30%;">
        <img src="http://www.test.com/1.jpg" width="150px" height="150px">
        </div>
        <div style="float: left;width: 70%;">
        text text texttext text texttext text text 
        text text texttext text texttext text text
        </div>
  </div>

Answer 3

在 CSS 中没有不使用 flexbox (good overview on flexbox here) 的“好”方法。

解决方案如下：

* { margin:0; padding:0 }

section {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

section > img {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-right: 10px;
  margin-bottom: 10px;
}

section > p {
  -ms-flex: 1 0 20em;
  -webkit-flex: 1 0 20em;
  flex: 1 0 20em;
}

<section>
  <img src="http://www.kimtradings.co.uk/ekmps/shops/kimtrading/images/e-shisha-liquid-coffe-flavour-6301-p.jpg" width="150px" height="150px">
  <p>We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels! We are the only network that guarantees to grow your channel from day ONE, even for small channels!</p>
</section>

可编辑演示：http://jsbin.com/foyuli/3

注意：对于 IE9 及以下版本，您将需要一些额外的逻辑（我建议完全不同的布局），因为不支持 flexbox。

Answer 4

您的图片和内容都没有任何包装。在这种情况下，我建议将图像包装在 div 中，将内容包装在 div 和 p 标签中。像这样：

<div>
     <image>
</div>
<div>
    <p>Insert Content here</p>
</div>

使用CSS，float: 离开两个div，你不会有问题。这会让您更好地控制定位，并让您在需要更改内容时更好地适应。

Answer 5

像这样 div 包装您的内容：

<img src="..." width="150px" height="150px">
<div class="content">
   We are the only network that...
</div>

然后使用溢出隐藏

.content {
   overflow: hidden;
}

如何在图像后立即修复边距

How to fix margin right after image

html

css

css-float