三個盒子,左右定寬,中間自適應有幾種方法


<div style="width:100%; margin:0 auto;"> 

 

       <div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>

 

       <div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>

 

       <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容,自適應寬度</div>

 

    </div>

 

 

第二種:左右兩側采用絕對定位 中間同樣采用margin-left margin-right方法:

 

 

第三種負的margin

使用這種方法就稍微復雜了一些了,使用的是負的margin值,而且html標簽也增加了,先來看其代碼吧:

<div id="main">

 <div id="mainContainer">main content</div></div><div id="left">

 <div id="leftContainer" class="inner">left content</div></div><div id="right">

 <div id="rightContainer" class="inner">right</div></div>

#main {

 float: left;

 width: 100%;

}

#mainContainer {

 margin: 0 230px;

 height: 200px;

 background: green;

}

#left {

 float: left;

 margin-left: -100%;

 width: 230px} 

#right {

 float: left;

 margin-left: -230px;

 width: 230px;

#left .inner,

#right .inner {

 background: orange;

 margin: 0 10px;

 height: 200px;

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM