양쪽에 부동 및 적응형 유체 레이아웃을 구현하는 방법
- 一个新手원래의
- 2017-09-18 09:11:021781검색
<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>
아직 작은 문제가 있습니다. 너비가 제대로 조정되지 않습니다. . .
위 내용은 양쪽에 부동 및 적응형 유체 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.