6-3 浮动与右侧尺寸固定的流体布局
本节编程练习不计算学习进度，请电脑登录imooc.com操作

浮动与右侧尺寸固定的流体布局

改变DOM位置的流体布局写法和不改变DOM位置的流体布局写法

任务

老师视频里的不同布局写法，不是习题！！不是习题！！！

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>浮动与右侧尺寸固定的流体布局</title>
  6. <style>
  7.  
  8. body { font-size: 14px; background-color: #DDF3F7; color: #333; }
  9. a { color: #0082CB; text-decoration: none; }
  10. p { margin: 0; } img { border: 0; }
  11.  
  12. .mib_body { width: 600px; margin-left: auto; margin-right: auto; }
  13. .mib_x { margin-bottom: 10px; background-color: #fff; }
  14. .mib_list { padding: 20px; overflow: hidden; _zoom: 1; resize: none; }
  15. .mib_resize { overflow: auto; resize: both; }
  16. .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
  17.  
  18. /* 下面这个是右浮动，改变DOM位置的流体布局写法 */
  19. .mib_head_r { width: 56px; float: right; }
  20. .mib_feed_flow { margin-right: 76px; }
  21. /* 下面这个是左浮动，不改变DOM位置的流体布局写法 */
  22. .mib_full_float { width: 100%; float: left; }
  23. .mib_head_l { width: 56px; float: left; margin-left: -56px;}
  24.  
  25. .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
  26. .mib_input { width: 70px; padding: 4px; font-size: 100%; }
  27. .mib_btn { width: 70px; padding: 5px; font-size: 100%; }
  28. </style>
  29. </head>
  30.  
  31. <body>
  32. <div id="mibBody" class="mib_body">
  33.     <div class="mib_x mib_resize">
  34.         <div class="mib_list">
  35.             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_r">
  36.                 <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
  37.             </a>
  38.             <div class="mib_feed_flow">
  39.                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
  40.                 <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
  41.             </div>    
  42.         </div>
  43.     </div>
  44.     <div class="mib_x mib_resize">
  45.         <div class="mib_list">
  46.         	<div class="mib_full_float">
  47.                 <div class="mib_feed_flow">
  48.                     <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
  49.                     <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
  50.                 </div>
  51.             </div>
  52.             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_l">
  53.                 <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
  54.             </a>	
  55.         </div>
  56.     </div>
  57. </div>
  58. </body>
  59. </html>
下一节