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

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;
}

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

更新了小提琴：http://jsfiddle.net/tp83febk/1/

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

div {
    padding-left: 180px;
}

更新了小提琴：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

如果不使用flexbox（good overview on flexbox here），在CSS中没有“好”的方法。

以下解决方案：

＆＃13;

＆＃13;

* { 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

可编辑演示：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;
}