標籤：ati ane blog 多次 lan 位置 input 子div put
技術服務於應用，技術來源於應用。
應用1：當接到設計師給的設計圖時（如），發現每列左右和上下文保持一致，頓時整個心情就不好了。因為要兼顧響應式，即沒辦法保證每個列表單元的具體位置，是列表中間還是邊緣，邊緣兩個要保證（左或右）內外邊距為零，無法獲得理想布局，綜合多次搜尋，得到解決辦法：
*** 增加列表地區寬度，margin設為負值。
原理相信有css基礎的道友都清楚（負邊距不僅能影響元素在文檔流的位置，還能增加元素的寬度），父元素向右增加寬度（margin負值）與列表元素右邊距相等，因使用的是bootstrap架構，列表元素預設padding15px，想要實現,就需要覆蓋樣式，將內邊距重寫為0，然後使用margin設定邊距。代碼如下：
代碼如下：div
<div class="tab-content lists">
<div class="tab-pane active" id="Ordinal">
<div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
</div>
</div>
主要CSS：
.website-list{
padding: 0px 39px 39px 0px;
}
.lists{
margin-right: -39px;
}
應用2：經典布局聖杯布局和雙飛翼布局：
相同點：：布局要求：主題部分三列，左右兩欄固定寬度，中間部分自適應。
不同點：：解決“中間欄div內容不被遮擋”問題的方法不同。聖杯布局,將中間欄元素設定padding left right後，將左右兩個div用相對布局position:relative；配合right和left屬性，以便不遮擋中間div，雙飛翼布局,在中間div內部建立div，設定子div的margin left right屬性，為兩邊div留下位置。
聖杯布局-原理：
1、將middle首先放在container的子項目第一個，然後是left，right,同時設定三者float:left；
2、middle要自適應，需要設定width:100%；讓left部分和middle處於一行，要是用margin-left:-100%;
3、此時left部分會遮蓋middle的內容，將middle部分收縮起來，設定其父元素container內邊距，padding：0 200px;
4、left部分內容隨同middle收縮，佔據middle一部分，需要設定left部分使用相對定位，獨立於middle，left:-200px;
5、同理right部分放置middle右部分，需要設定其相對定位、寬度和margin-left、right值。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖杯布局</title>
<style>
body{
margin:auto;
text-align: center;
}
.container{
overflow: hidden;
margin:10px 0;
padding: 0 200px;
}
.left{
float: left;
position: relative;
margin-left: -100%;
left: -210px;
width: 200px;
background-color:grey;
}
.middle{
float: left;
width: 100%;
background-color: red;
}
.right{
right: -210px;
margin-left: -200px;
width: 200px;
float: left;
position: relative;
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
雙飛翼-原理：
1、將middle首先放在container的子項目第一個，然後是left，right,同時設定三者float:left；
2、middle要自適應，需要設定width:100%；讓left部分和middle處於一行，要是用margin-left:-100%;，right使用margin-left:-190px;
3、此時middle的內容被覆蓋，要把middle的內容拉出來，除了使用外圍container的padding，還可以考慮使用margin，給middle增加一個內層div -- middle_content, 然後設定 margin:0 200px
實現代碼：
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>雙飛翼布局</title>
<style type="text/css">
body {
text-align: center;;
}
.container {
overflow: hidden;
margin: 10px 0;
}
.left {
background-color: red;
float:left;
width:190px;
margin-left: -100%;
}
.right {
background-color: green;
width: 190px;
float: left;
margin-left: -190px;
}
.middle {
float: left;
width: 100%;
}
.middle-content {
background-color:grey;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
<div class="middle-content">
middle-content
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
最佳化：當縮小放大瀏覽器介面時，左右盒子寬度不變，中間是自適應的，但當介面太窄時，就會出現顯示問題，為大盒子（container）這是最小寬度，當介面小於最小寬度時，中間寬度不變，出現橫向滾動。
css margin負邊距之列布局（列表、聖杯、雙飛翼）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
