<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
*{
margin:0;
padding:0;
color:#FFF;
}
.a{
background:#FF0000;
width:100%;
float:left;
margin-right:-100px;
}
.b{
background:#006699;
width:100px;
float:right;
}
.c{
background:#006666;
margin-right:100px;
}
</style>
</head>
<body>
<div class="a"><div class="c">左</div></div><div class="b">右</div>
</body>
</html>
上面代碼是右側固定寬度，左側自適應寬度，margin-right:-100px 也說明了浮動元素的尺寸是受margin影響的，上面a的寬度 就是100%寬度再減去 100px
這裡自適應是利用的浮動元素的尺寸可以通過margin來調整，如果給予margin-right負值，那麼右側將會裁去相應的寬度，這樣就給右側的固定寬度布局留出了相同大小的空間
這樣視覺上是右側固定浮動，左側自適應的浮動，但是事實上如果沒有c元素，而是直接把文字放到a中，文字是會跑到b的下面去的，所以我給a裡面加上了c，並且不指定寬度，水平右側外邊距給100px，這樣文字就不會再被覆蓋，大家可以測試一下
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
