如何实现浮动与两侧皆自适应的流体布局

一个新手 2017-09-18 09:11 1901浏览原创

<p style="margin-bottom: 7px;">nbsp;html><br><br></p><br><meta><br><title>浮动与两侧皆自适应的流体布局</title><br><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><br><br><p><br></p><p><br></p><p><br>    <a><br>    @@##@@<br>    </a><br>    	</p><p><br>        </p><p><a>徐若瑄VIVIAN<i></i></a><br>        ：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~</p><br>        	<p><br>            @@##@@<br>            </p><br>        <br>    <br><br><!--底部列表--><br><p><br></p><p><br>    </p><p>选择头像宽度：<select><br>    <option>56px</option>
<br>    <option>70px</option>
<br>    <option>84px</option>
<br>    </select></p><br>    <br><br><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><br><br>

还有点小问题，宽度没调好。。。