百分比佈局雙飛翼佈局聖盃佈局

時間 2019-12-16

標籤百分比佈局雙飛简体版

原文原文鏈接

1.百分比佈局：全部的百分比都是相對父級的css

Div{ Width：50%;}div的寬是它父級元素的百分之五十html

2.雙飛翼佈局　佈局

中間固定兩邊自適應htm

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>雙飛翼佈局</title>
　　　　<style type="text/css">
　　　　　　.left, .center, .right {
　　　　　　　　float: left;
　　　　　　　　min-height: 130px;
　　　　　　　　text-align: center;
　　　　　　}
　　　　　　.left {
　　　　　　　　margin-left: -100%;
　　　　　　　　background: green;
　　　　　　　　width: 200px;
　　　　　　}utf-8

　　　　　　.right {
　　　　　　　　margin-left: -300px;
　　　　　　　　background-color: red;
　　　　　　　　width: 300px;
　　　　　　}
　　　　　　.center {
　　　　　　　　background-color: blue;
　　　　　　　　width: 100%;
　　　　　　}
　　　　　　.center1{
　　　　　　　　margin: 0 300px 0 200px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="cont">
　　　　　　<div class="center">
　　　　　　　　<div class="center1">center</div>
　　　　　　</div>
　　　　　　<div class="left">left</div>
　　　　　　<div class="right">right</div>
　　　　</div>
　　</body>
　　</html>it

3.聖盃佈局io

兩端固定中間自適應class

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>聖盃佈局</title>
　　　　<style type="text/css">
　　　　　　.cont {
　　　　　　　　padding: 0 300px 0 200px;
　　　　　　}
　　　　　　.left, .center, .right {
　　　　　　　　position: relative;
　　　　　　　　min-height: 130px;
　　　　　　　　float: left;
　　　　　　}
　　　　　　.left {
　　　　　　　　left: -200px;
　　　　　　　　margin-left: -100%;
　　　　　　　　background: green;
　　　　　　　　width: 200px;
　　　　　　}
　　　　　　.right {
　　　　　　　　right:-300px;
　　　　　　　　margin-left: -300px;
　　　　　　　　background-color: red;
　　　　　　　　width: 300px;
　　　　　　}
　　　　　　.center {
　　　　　　　　background-color: blue;
　　　　　　　　width: 100%;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="cont">
　　　　　　<div class="center">中間</div>
　　　　　　<div class="left">左邊</div>
　　　　　　<div class="right">右邊</div>
　　　　</div>
　　</body>
　　</html>meta

Margin-right設置爲整數不會對自身元素形成影響讓平行元素往右移動float

Margin-right設置爲負數自身元素就會向右移動

相關標籤/搜索

每日一句

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

百分比佈局 雙飛翼佈局 聖盃佈局

百分比佈局雙飛翼佈局聖盃佈局