浮動(dòng)與右側(cè)尺寸固定的流體布局
改變DOM位置的流體布局寫法和不改變DOM位置的流體布局寫法
任務(wù)
老師視頻里的不同布局寫法，不是習(xí)題?。〔皇橇?xí)題?。?！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)與右側(cè)尺寸固定的流體布局</title>
<style>
body { font-size: 14px; background-color: #DDF3F7; color: #333; }
a { color: #0082CB; text-decoration: none; }
p { margin: 0; } img { border: 0; }
.mib_body { width: 600px; margin-left: auto; margin-right: auto; }
.mib_x { margin-bottom: 10px; background-color: #fff; }
.mib_list { padding: 20px; overflow: hidden; _zoom: 1; resize: none; }
.mib_resize { overflow: auto; resize: both; }
.mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
/* 下面這個(gè)是右浮動(dòng)，改變DOM位置的流體布局寫法 */
.mib_head_r { width: 56px; float: right; }
.mib_feed_flow { margin-right: 76px; }
/* 下面這個(gè)是左浮動(dòng)，不改變DOM位置的流體布局寫法 */
.mib_full_float { width: 100%; float: left; }
.mib_head_l { width: 56px; float: left; margin-left: -56px;}
.mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
.mib_input { width: 70px; padding: 4px; font-size: 100%; }
.mib_btn { width: 70px; padding: 5px; font-size: 100%; }
</style>
</head>
<body>
<div id="mibBody" class="mib_body">
<div class="mib_x mib_resize">
<div class="mib_list">
<a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_r">
<img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
</a>
<div class="mib_feed_flow">
<p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認(rèn)證" class="mib_vip"></i></a>：一個(gè)人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說(shuō)！ 我認(rèn)真吃完這，燒就會(huì)退了吧？！ 開(kāi)動(dòng)啦~~~~~~~~~~~~~~~~~~</p>
<div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
</div>
</div>
</div>
<div class="mib_x mib_resize">
<div class="mib_list">
<div class="mib_full_float">
<div class="mib_feed_flow">
<p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認(rèn)證" class="mib_vip"></i></a>：一個(gè)人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說(shuō)！ 我認(rèn)真吃完這，燒就會(huì)退了吧？！ 開(kāi)動(dòng)啦~~~~~~~~~~~~~~~~~~</p>
<div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
</div>
</div>
<a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_l">
<img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
</a>
</div>
</div>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
