両側にフローティングおよびアダプティブ流体レイアウトを実装する方法

<p style="margin-bottom: 7px;">&lt;!doctype html&gt;<br/>&lt;html&gt;<br/>&lt;head&gt;<br/>&lt;meta charset=&quot;utf-8&quot;&gt;<br/>&lt;title&gt;浮动与两侧皆自适应的流体布局&lt;/title&gt;<br/>&lt;head&gt;<br/>&lt;style&gt;<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;}&lt;!--边框弧度--&gt;<br/>.body{width:200px;margin-left:auto;margin-right:auto;}<br/>.mib_x{margin-bottom:10px;background-color:#CCC;}<br/>.list{padding:10px;}&lt;!--两个框中内边距--&gt;<br/>.body1{overflow:auto;resize:both;}&lt;!--表示允许用户调整大小--&gt;<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/>&lt;!--下面是固定布局写法--&gt;<br/>.letter { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }<br/>.mib_sms{line-height:22px;padding-bottom:6px;font-size:14px;}&lt;!--字体--&gt;<br/>.mib_select{width:80px;padding:5px;font-size:100%}<br/>&lt;/style&gt;<br/>&lt;/head&gt;<br/>&lt;body&gt;<br/>&lt;p class=&quot;body&quot;&gt;<br/>&lt;p class=&quot;body1 mib_x&quot;&gt;<br/>	&lt;p class=&quot;list&quot;&gt;<br/>    &lt;a href=&quot;http://t.sina.com.cn/xuruoxuan&quot; class=&quot;mib_head_a&quot;&gt;<br/>    &lt;img id=&quot;mibHeadImg&quot; title=&quot;徐若瑄VIVIAM&quot; src=&quot;http://img.mukewang.com/53e2e9470001dfd200500050.jpg&quot; &gt;<br/>    &lt;/a&gt;<br/>    	&lt;p class=&quot;letter&quot;&gt;<br/>        &lt;p class=&quot;mib_sms&quot;&gt;&lt;a title=&quot;徐若瑄VIVIAN&quot; href=&quot;http://t.sina.com.cn/xuruoxuan&quot;&gt;徐若瑄VIVIAN&lt;i title=&quot;新浪认证&quot; class=&quot;mib_vip&quot;&gt;&lt;/i&gt;&lt;/a&gt;<br/>        ：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~&lt;/p&gt;<br/>        	&lt;p class=&quot;picture2&quot;&gt;<br/>            &lt;img src=&quot;http://img.mukewang.com/53e2e9b10001948000890120.jpg&quot; height=&quot;120&quot;&gt;<br/>            &lt;/p&gt;<br/>        &lt;/p&gt;<br/>    &lt;/p&gt;<br/>&lt;/p&gt;<br/>&lt;!--底部列表--&gt;<br/>&lt;p class=&quot;mib_x&quot;&gt;<br/>	&lt;p class=&quot;list&quot;&gt;<br/>    &lt;p class=&quot;mib_sms&quot;&gt;选择头像宽度：&lt;select id=&quot;minselect&quot; class=&quot;mib_select&quot;&gt;<br/>    &lt;option value=&quot;56px&quot;&gt;56px&lt;/option&gt;<br/>    &lt;option value=&quot;70px&quot;&gt;70px&lt;/option&gt;<br/>    &lt;option value=&quot;84px&quot;&gt;84px&lt;/option&gt;<br/>    &lt;/select&gt;&lt;/p&gt;<br/>    &lt;/p&gt;<br/>&lt;/p&gt;<br/>&lt;/p&gt;<br/>&lt;script&gt;<br/>var Select=document.getElementById(&quot;minselect&quot;),headimg=document.getElementById(&quot;mibHeadImg&quot;);<br/>if(Select&amp;&amp;headimg){<br/>	Select.onchange=function(){<br/>		headimg.style.width=this.value;<br/>		};<br/>	}<br/>&lt;/script&gt;<br/>&lt;/body&gt;<br/>&lt;/html&gt;<br/></p>

まだ小さな問題があり、幅が適切に調整されていません。 。 。

以上が両側にフローティングおよびアダプティブ流体レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。