浮動左vs浮動右 - 爲什麼訂單更改？

HTML：浮動左vs浮動右 - 爲什麼訂單更改？

<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

來源

2017-10-19 psj01

如果它們都左邊，圖像先被推到左邊，然後文字像你所說的那樣向左推。這是正確的。圖像一直推到右側，然後文本被推到右側，基本上撞到圖像上。

第一個項目先被推入其各自的方向，然後是第二個項目。你基本上只是改變方向，當你改變浮球右。他們單獨朝着浮動方向移動，以便它們被放置在CSS中，但不會相互傳遞。

來源

2017-10-19 21:29:46 wpalmes

序列1是因爲img元素在文本之前首先被渲染並保持在最左邊的位置;

序列2是由於相同的原因：img元素在文本之前首先被渲染並保持在最右邊的位置。

來源

2017-10-19 21:33:16 Richard

float: right與float: left相比簡單顛倒了水平順序，類似於從右向左書寫的語言。第一個項目右對齊，下一個按照從右到左的順序，依此類推。

來源

2017-10-19 21:33:24 Johannes

由於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標籤內，保持相同的浮動留在他們的屬性，但隨後浮動整個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作爲容器來定位對象。希望這可以幫助！

來源

2017-10-19 21:37:31

浮動左vs浮動右 - 爲什麼訂單更改？

回答

相關問題