Heim >Web-Frontend >CSS-Tutorial >So implementieren Sie ein schwebendes und adaptives Fluid-Layout auf beiden Seiten
So implementieren Sie ein schwebendes und adaptives Fluid-Layout auf beiden Seiten
- 一个新手Original
- 2017-09-18 09:11:021782Durchsuche
<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>
Es gibt immer noch ein kleines Problem, die Breite ist nicht richtig eingestellt. . .
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein schwebendes und adaptives Fluid-Layout auf beiden Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode-Freigabe für das Auswahlfeld „Div-Simulation“.Nächster Artikel：Beispielcode-Freigabe für das Auswahlfeld „Div-Simulation“.