Maison > Article > interface Web > Comment implémenter une disposition fluide flottante et adaptative des deux côtés

Comment implémenter une disposition fluide flottante et adaptative des deux côtés

一个新手original: 2017-09-18 09:11:021767parcourir

<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>

Il y a encore un petit problème, la largeur n'est pas bien réglée. . .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de partage de code pour la zone de sélection de simulation divArticle suivant：Exemple de partage de code pour la zone de sélection de simulation div

Articles Liés

Voir plus