Question

HTML：

<img src="http://2.bp.blogspot.com/-lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" alt="Author photo">
<p class="author-text">Jackson Gonzalez</p>

CSS：

 img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
}
.author-text {
    font-size: 22px;
    float: left;
}

如果我有浮动，顺序对我有意义..因为首先是图像然后是文本。但是，当我从左向右更改浮动时..首先文本显示然后图像？..为什么订单会改变？...

左：https://codepen.io/psj01/pen/YrgKLy 右：https://codepen.io/psj01/pen/KXEPoQ

Answer 1

如果它们都是左侧，则先将图像向左推，然后像您所说的那样向左推文本。右边的情况也是如此。图像一直向右推，然后文本被推到右边，基本上会碰到图像。

首先将第一个项目推入其各自的方向，然后是第二个项目。当您将浮动更改为右侧时，基本上只是反转方向。它们按照它们在CSS中布局的顺序单独向浮动方向移动，但不会相互传递。

Answer 2

与float: right相比，

float: left只是颠倒水平顺序，类似于从右到左书写的语言。第一个项目右对齐，下一个项目按从右到左的顺序排列，依此类推。

Answer 3

由于HTML文件中内容的定位，CSS会将列出的第一个项目放在指定的最远点。你希望两个项目都在右边，但是首先放置图像（放在文本的左侧），你可以尝试两个选项中的一个。首先，只需将p标记放在HTML中的图像标记之前，如下所示：

<p class="author-text">Jackson Gonzalez</p>

<img src="http://2.bp.blogspot.com/-
lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" 
alt="Author photo">

或者您可以将两个元素放在div标记内，保持相同的float left属性，但然后将整个div容器浮动到右侧。像这样：

HTML文件

  <img src="http://2.bp.blogspot.com/-lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" alt="Author photo">

  <p class="author-text">Jackson Gonzalez</p>

<div>

CSS文件

div {
  float: right;
} 

img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
}
.author-text {
    font-size: 22px;
    float: left;
}

我在您的代码笔链接中尝试了这两个选项。使用div作为容器来定位对象。希望这有帮助！

Answer 4

序列1是因为img元素首先被渲染并且在文本之前首先保持在最左侧位置;

序列2是由于同样的原因：首先渲染img元素并在文本之前首先保持最右边的位置。

向右浮动vs向右浮动 - 为什么订单会改变？

4 个答案: