有没有办法从底部浮动CSS元素？ [复制]

Question

鉴于以下 HTML：

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

我希望得到这样的东西：

但我最终得到的是这样的：

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

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

<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. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" />
</div>

这里是a pen，显示了代码的行为方式。这样的事情可能吗？为什么 margin-bottom 会导致我期望的行为，而 margin-top 不会？

Answer 1

您可以通过几种方法对齐img tag 并为文本添加更多标签并获得结果作为您在问题中提出的第一个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 添加margin-left 值。那是因为我们使用了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>

ma​​rgin-top（正值） - 当我们将 margin-top positive value 分配给一个元素时，它会从顶部推动该元素，如果它下方有某个元素，则也向下移动位。

ma​​rgin-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>