什麼時候HTML元素的順序很重要？

我有一行文本，我想在全屏液體佈局內放置一個小圖形。我有它的工作，但我不知道爲什麼。什麼時候HTML元素的順序很重要？

的HTML：

<div class="wrapper"> 
    <div class="image_container"> 
    <img src="some_valid_url"> 
    </div> 
    <div class="text">Zachary</div> 
</div>

的CSS（寫在上海社會科學院，如果你好奇的嵌套）：

.wrapper { 
    text-align: right; 
    float: left; 
    width: 10%; 
    word-wrap: breakword; 
} 

.image_container { 
    margin-left: 2px; 
    float: right; 

    img { 
     height: 20px; 
     width: 20px; 
     vertical-align: top; 
    } 
} 

.text { 
    overflow: hidden; 
}

什麼這是應該做的是地方的小圖形和文本在一行上，圖形在文本的右側。它的工作原理，但只有當image_container div高於文本div。翻轉它們，圖像現在位於文本下方。這是爲什麼？

來源

2010-09-04 Zachary Wright

我不清楚你的描述，如果你可以用圖形解釋我想自定義更新，使其工作。 – 2010-09-04 03:11:19

它與div.text是一個塊級元素，不與浮動的.image_container交互。

當.image_container是div.text前的標記它漂浮到右邊，然後因爲div.text不清除或浮動的，它本質上忽略.image_container並繼續在同一垂直線上。

但是，當.image_container在div.text之後，它佔用了可用水平空間的100％（因爲它是塊級別），所以它尊重它並浮動到右下方，正下方。

如果你在你的元素周圍放置邊界，應該清楚發生了什麼。

來源

2010-09-04 03:14:26 Pat

你能否回答http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8？ – Lijo 2012-03-30 13:21:40

它不是真正的HTML，而是CSS。 CSS float仍然像塊一樣處理元素 - 浮動塊元素。帶有浮子的元素基本上保持一隻腳在地面上，其位置在其位置，但其餘的浮在空中。 CSS浮動不像位置絕對，它完全彈出它的塊位置和使其浮動。

來源

2010-09-04 03:14:09 Azmisov

我相信問題是你的文本對齊在包裝。文本對齊實際上也將對齊div內的元素，所以如果您的文本首先被列出，文本和圖像將被推向右邊。你可以通過在文本類中添加「float：left」來解決這個問題。

來源

2010-09-04 03:14:53 user158017

我已經做了定製的解決方案，它甚至工作，你把下面或最多圖像容器的文本

<div class="wrapper clearfix"> 
    <div class="image_container"> 
     <img src="http://www.netbsd.org/images/download-icon-orange.png" /> 
    </div> 
    <div class="text">Zachary</div> 
</div>

.image_container,.text{ 
    float:left; 
    line-height:40px; 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

你可以看到它的working demo

讓我知道如果還有其他需要的話。

來源

2010-09-04 03:26:25

什麼時候HTML元素的順序很重要？

回答

相關問題