Home >Web Front-end >CSS Tutorial >How to implement floating and adaptive fluid layout on both sides
How to implement floating and adaptive fluid layout on both sides
- 一个新手Original
- 2017-09-18 09:11:021777browse
<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>
There is still a small problem, the width is not adjusted properly. . .
The above is the detailed content of How to implement floating and adaptive fluid layout on both sides. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Sample code sharing for div simulation select boxNext article：Sample code sharing for div simulation select box