从底部有没有任何css浮动元素的方法？

Question

鉴于以下HTML：

_config.yml

我希望得到这样的东西：

但实际上我最终得到的是：

<div>
  lorem ipsum...
  <img style="float:left;margin-top:-100px" />
</div>

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 150px;
  float: left;
  margin-top: -100px;
}

以下是显示代码行为方式的a pen。这样的事情可能吗？为什么保证金最终导致我预期的行为，但保证金最终没有？

Answer 1

您可以通过多种方式调整img tag并为文字添加更多标记，并将结果作为您在问题中提出的 first img 。

解决方案1： - 我们添加了2 <p> tags。然后使用 nth-child（）选择器将margin-left添加到第二个<p> tag，其等于image+10px的宽度。还会添加负值以将img tag置于顶部并替换2nd <p> tag。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.box > p:nth-child(2){
  margin-left:110px;
}
.image{
  width:100px;
  margin-top:-140px;
  float:left;
}

<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>

解决方案2： - 我们添加了2 <p> tags。但是这次没有负余量添加到img tag or .image只是向左浮动，甚至没有余量左边值到2nd <p> tag。那是因为我们使用了float:left for .image和float:right for 2nd <p> tag所以默认情况下它们都是对齐的。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.box > p:nth-child(2){
  float:right;
  width:180px;
  margin:0px;
}
.image{
  width:100px;
  float:left;
}

<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>

解决方案3：无需添加任何<p> tag或其他标记来设置文字样式，但如果您为文字添加一些默认分配的标记，则这是一种很好的做法。 只需在您HTML codes中进行更改，即在您的文字之间添加<img>，然后就可以了。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.image{
  width:100px;
  float:left;
  padding:10px 10px 0px 0px;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 

</div>

margin-top（正值） - 当我们将margin-top positive value分配给一个元素时，它会从顶部推送该元素，如果它下面有一些元素，那么它也会向下移动。

margin-top（负值） - 但是当我们将margin-top negative value分配给一个元素时，那时我们正在使该元素进入另一个元素的字段本身已经分配了一些属性，即拉动或强制下面的顶部。

这也是您问题中的问题，您要么对HTML代码进行更改，要么在文本之间添加<img>，要么添加<p> tag并继续工作。

Answer 2

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 100px;
  height:100px;
  float:left;
  margin-right: 1em;

}

<div class="Block">
  Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  <br><br>
  Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
  
</div>