html - 有没有什么办法可以让 css 从底部 float 元素？

Question

<分区>

Answer 1

有几种方法可以对齐 img tag并为文本添加更多标签，并按照您在问题中提出的要求将结果作为您的 first img。

解决方案 1:- 我们添加了 2 <p> tags .然后添加margin-left到第二 <p> tag使用 nth-child() 选择器，它等于 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只是向左浮动，甚至没有 margin-left 值到 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>

ma​​rgin-top(正值) - 当我们分配 margin-top positive value 时到一个元素，它从顶部插入该元素，如果它下面有一些元素，那么它也会向下移动一点。

ma​​rgin-top(负值) - 但是当我们分配 margin-top negative value 时到一个元素，所以此时我们正在使该元素进入另一个元素的字段，该元素本身已经分配了一些属性，即拉动或强制从下面到顶部。

这也是您问题中的问题，要么您更改 HTML 代码，即 <img>在文本之间或添加 <p> tag和工作。