雙飛翼與神聖羅馬布局

時間 2019-11-16

標籤雙飛羅馬佈局简体版

原文原文鏈接

雙飛翼佈局和神聖羅馬布局都是適用負外邊距來實現的，都有一個共同的基礎。css

下面是其相同的代碼：html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
    .main{width:100%;height:80px;background-color:#00f;  float:left;
        
    }
    .side{width:190px;height:80px;background-color:#F00;; float:left; margin-left:-100%;
    }
    .exta{width:320px;height:80px;background-color:#0f0; float:left; margin-left:-320px;//這是margin-left而不是margin-right
    }
</style>

<body>
    <div class="main">main</div>
    <div class="side">side</div>
    <div class="exta">exta</div>
</body>
</html>

效果以下圖，這是一個三列布局，main先顯示，並把它放在中間位置，這是這個三列布局的最終目的，主要是「重要內容先加載」。ide

而上圖效果顯然沒有達到，main中的內容顯然沒有顯示，由於其被遮住了，要解決這個問題有兩種方式，第一種是採用神聖羅馬布局的方式：以下佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
    .main{width:100%;height:80px;background-color:#00f;  float:left;
        
    }
    .side{width:190px;height:80px;background-color:#F00;; float:left;
        margin-left:-100%;
    }
    .exta{width:320px;height:80px;background-color:#0f0; float:left;
        margin-left:-320px;
    } .pd{padding:0 320px 0 190px;}
</style>

<body>
    <div class="pd">
        <div class="main">main</div>
        <div class="side">side</div>
        <div class="exta">exta</div>
    </div>
</body>
</html>

給容器添加padding使得左右兩邊留夠side exta的寬度。而後下一步採用相對位置的方式把side exta 向兩邊留有的餘量移動。ui

<style type="text/css">
    .main{width:100%;height:80px;background-color:#00f;  float:left;
        
    }
    .side{width:190px;height:80px;background-color:#F00;; float:left;
        margin-left:-100%; position:relative; right:190px;
    }
    .exta{width:320px;height:80px;background-color:#0f0; float:left;
        margin-left:-320px; position:relative;left:320px;
    }
    .pd{padding:0 320px 0 190px;}
</style>

達成效果。spa

第二種方式是淘寶使用的雙飛翼模式：code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
    .main{width:100%;height:80px;background-color:#00f;  float:left;
        
    }
    .side{width:190px;height:80px;background-color:#F00;; float:left;
        margin-left:-100%;
    }
    .exta{width:320px;height:80px;background-color:#0f0; float:left;
        margin-left:-320px;
    } .main_content{padding:0 320px 0 190px;}
</style>

<body>
    <div class="pd">
        <div class="main">
               <div class="main_content"> main</div>
        </div>
        <div class="side">side</div>
        <div class="exta">exta</div>
    </div>
</body>
</html>

這種方式只是在main裏面內嵌了一個div標籤，而後經過padding屬性定位main 的位置，達到要求。xml

相關標籤/搜索

每日一句

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