HTML元素的定義順序對1欄固定1欄浮動佈局的影響

時間 2019-11-12

標籤 html 元素定義順序固定浮動佈局影響欄目 HTML 简体版

原文原文鏈接

請先看兩個佈局：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #left 
        {
            margin-right: 100px;
        }
        #right 
        {
            width: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <body>
        <div id="parent">
            <div id="right" style='height: 100px;background-color: #0f0;'>右列定寬</div>
            <div id="left" style='height: 100px;background-color: #f00;'>左列自適應</div>
        </div>
    </body>
</body>
</html>

效果以下：佈局

這是一個普通的一欄固定，一欄浮動的佈局。沒有什麼特別的。ui

下一個佈局時這樣的：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #left 
        {
            margin-right: 100px;
        }
        #right 
        {
            width: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <body>
        <div id="parent">
            <div id="left" style='height: 100px;background-color: #f00;'>左列自適應</div>
            <div id="right" style='height: 100px;background-color: #0f0;'>右列定寬</div>
        </div>
    </body>
</body>
</html>

這個佈局的style標籤內容和上一個同樣，可是效果不同：htm

能夠說佈局已經失效了。it

這個兩個佈局的不一樣在於id爲left和right的這兩個元素定義的順序不一樣。若是先定義固定的right元素，再定義浮動的left元素，那麼佈局是成功的，就像第一張圖那樣。但若是順序反過來，就會像上圖那樣。class

我猜測這可能和渲染的機制有關，先生成固定寬度的元素，才能讓後定義的浮動元素來「適應」它。渲染

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。