float -- 自适应 demo

来源：互联网发布：淘宝一元拍卖的玉真假编辑：程序博客网时间：2024/06/06 01:36

转自慕课

<!doctype html><html><head><meta charset="utf-8"><title>浮动与两侧皆自适应的流体布局</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; }.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==); }.mib_head_a { float: left; margin-right: 20px; }/* 下面这个是固定布局写法 */.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }.mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }.mib_select { width: 80px; 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_a">                <img id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">            </a>            <div class="mib_cell">                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>                <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>            </div>            </div>    </div>    <div class="mib_x">        <div class="mib_list">            <p class="mib_sms">            选择头像的宽度：<select id="minSelect" class="mib_select">                <option value="56px">56px</option>                    <option value="70px">70px</option>                    <option value="84px">84px</option>                    <option value="100px">100px</option>                </select>            </p>        </div>    </div></div><script>var ele_mibSelect = document.getElementById("minSelect"),ele_mibHeadImg = document.getElementById("mibHeadImg");if (ele_mibSelect && ele_mibHeadImg) {ele_mibSelect.onchange = function() {ele_mibHeadImg.style.width = this.value;};}</script></body></html>

<!doctype html><html><head><meta charset="utf-8"><title>浮动与右侧尺寸固定的流体布局</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==); }/* 下面这个是右浮动，改变DOM位置的流体布局写法 */.mib_head_r { width: 56px; float: right; }.mib_feed_flow { margin-right: 76px; }/* 下面这个是左浮动，不改变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://img.mukewang.com/53e2e9470001dfd200500050.jpg">            </a>            <div class="mib_feed_flow">                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>                <div class="feed_img"><img src="http://img.mukewang.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="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>                    <div class="feed_img"><img src="http://img.mukewang.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://img.mukewang.com/53e2e9470001dfd200500050.jpg">            </a>        </div>    </div></div></body></html>

0 0