如何实现浮动与两侧皆自适应的流体布局
- 一个新手原创
- 2017-09-18 09:11:021768浏览
<p style="margin-bottom: 7px;"><!doctype html><br/><html><br/><head><br/><meta charset="utf-8"><br/><title>浮动与两侧皆自适应的流体布局</title><br/><head><br/><style><br/>body{font-size:14px;background:#6CF;}<br/>a{color:#0082CB;text-decoration:none;}<br/>p{margin:0;}img{border:1px #999 solid;border-radius:10px;}<!--边框弧度--><br/>.body{width:200px;margin-left:auto;margin-right:auto;}<br/>.mib_x{margin-bottom:10px;background-color:#CCC;}<br/>.list{padding:10px;}<!--两个框中内边距--><br/>.body1{overflow:auto;resize:both;}<!--表示允许用户调整大小--><br/>.mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }<br/>.mib_head_a{float:left;margin-right:20px;}<br/><!--下面是固定布局写法--><br/>.letter { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }<br/>.mib_sms{line-height:22px;padding-bottom:6px;font-size:14px;}<!--字体--><br/>.mib_select{width:80px;padding:5px;font-size:100%}<br/></style><br/></head><br/><body><br/><p class="body"><br/><p class="body1 mib_x"><br/> <p class="list"><br/> <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a"><br/> <img id="mibHeadImg" title="徐若瑄VIVIAM" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" ><br/> </a><br/> <p class="letter"><br/> <p class="mib_sms"><a title="徐若瑄VIVIAN" href="http://t.sina.com.cn/xuruoxuan">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a><br/> ：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~</p><br/> <p class="picture2"><br/> <img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"><br/> </p><br/> </p><br/> </p><br/></p><br/><!--底部列表--><br/><p class="mib_x"><br/> <p class="list"><br/> <p class="mib_sms">选择头像宽度：<select id="minselect" class="mib_select"><br/> <option value="56px">56px</option><br/> <option value="70px">70px</option><br/> <option value="84px">84px</option><br/> </select></p><br/> </p><br/></p><br/></p><br/><script><br/>var Select=document.getElementById("minselect"),headimg=document.getElementById("mibHeadImg");<br/>if(Select&&headimg){<br/> Select.onchange=function(){<br/> headimg.style.width=this.value;<br/> };<br/> }<br/></script><br/></body><br/></html><br/></p>
还有点小问题，宽度没调好。。。
以上是如何实现浮动与两侧皆自适应的流体布局 的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn