定寬+自適應(yīng)寬
/*方法一：彈性布局*/
.parent1{
display:?flex;
height:300px;
}
.side1{
width:200px;
height:100%;
background-color:#c00000;
margin-right:10px;
}
.main1{
flex:1;
background-color:#4f81bd;
}
/*方法二：浮動*/
.side2{
width:200px;
height:300px;
background-color:#c00000;
float:left;
}
.main2{
height:300px;
margin-left:210px;
background-color:#4f81bd;
}
/*方法三：絕對定位*/
.parent3{
height:300px;
position:relative;
}
.side3{
width:200px;
height:100%;
background-color:#c00000;
}
.main3{
position:absolute;
height:100%;
width:100%;
left:210px;
top:0;
background-color:#4f81bd;
}
<div class="tab">
??? <ul class="lesson">
??????? <li class="active">課程</li>
??????? <li>學(xué)習(xí)計劃</li>
??????? <li>技能圖譜</li>
??? </ul>
??? <div class="con">
??????? <p class="con_1">課程內(nèi)容</p>
??????? <p class="con_2">學(xué)習(xí)計劃內(nèi)容</p>
??????? <p class="con_3">技能圖譜內(nèi)容</p>
??? </div>
</div>
彈性布局
body{ margin: 0; }
li{?list-style:?none;?}
ul,?p{?padding:?0;?margin:?0;?}
/*?css?reset?*/
body{?font-size:?14px;?font-family:?'微軟雅黑';?}
.tab{?width:?572px;?border:?1px?solid?#999;?margin:?10px?auto;?}
.lesson{?display:?flex;?}
li{?flex-grow:?1;?flex-basis:?0;?text-align:?center;?border-left:?1px?solid?#cecece;?border-bottom:?1px?solid?#cecece;
line-height:?30px;background:?#f1f1f1;?}
.con{?height:?40px;?background:?#fff;?padding:?20px;?}
.con_1,?.con_2,?.con_3{?display:?none;?}
.con_1{?display:?block;?}
.active{?background:?#ffffff;?border:?none;?}
一般版本--兼容IE6
body{ font-size: 14px; font-family: '微軟雅黑'; }
ul,?p{
margin:?0;
padding:?0;
}
li?{
list-style:?none;
}
/*?css?reset?*/
.clear?{?zoom:?1?}
.clear:after?{?content:?'';?display:?block;?clear:?both??}
.tab?{
margin:?10px?auto;
width:?572px;
border:?1px?solid?#999;
}
.lesson?li?{
float:?left;
width:?190px;
line-height:?30px;
text-align:?center;
border:?1px?solid?#cecece;
border-top:?none;
border-right:?none;
background:?#f1f1f1;
}
.lesson?.active?{?border:?0;?background:?#ffffff;?}
.con{?height:?40px;?background:?#fff;?padding:?20px;?}
.con_1,?.con_2,?.con_3{?display:?none;?}
.con_1{?display:?block;?}
.active{?background:?#ffffff;?border:?none;?}
<div class="pop">
??? <div class="head">
? ? ? ? <p class="title">標(biāo)題欄</p>
? ? ? ? <button class="close></button>
</div>
??? <div class="content">
??????? <p class="text">內(nèi)容區(qū)段落</p>
??????? <buttonclass="button">確定</button>
??? </div>
</div>
/*整個彈出窗口設(shè)置饮醇，彈性布局*/
.pop{
position:?fixed;
top:?50%;
right:?50%;
transform:?translate(50%,?-50%);
width:?300px;
border:?1px?solid?#cccccc;
border-radius:?5px;
}
/*head作為關(guān)閉按鈕的參考物*/
.head{
position:?relative;
height:?40px;
background-color:?#eeeeee;
}
/*設(shè)置行高和元素同高來使文字居中澎粟，分別設(shè)置隱藏、不換行和...*/
.title{
height:?100%;
margin:?0?20px;
font:?14px/40px?"微軟雅黑";
overflow:?hidden;
white-space:?nowrap;
text-overflow:?ellipsis;
}
/*考慮到關(guān)閉按鈕位置已確定梢莽，采用絕對定位，去除按鈕默認(rèn)邊框吞获，以背景圖方式引入圖片渔嚷，失敗則用紅色標(biāo)記*/
.close{
position:?absolute;
border:?0;
padding:?0;
top:?10px;
right:?10px;
width:?10px;
height:?10px;
background:?url('../x.png')?red;
cursor:?pointer;
}
/*把段落和按鈕都放入內(nèi)容區(qū)padding內(nèi)*/
.content{
padding:?20px;
background-color:?white;
font:?12px/1.5?"宋體";
}
/*段落距按鈕20px*/
.text{
margin:?0?0?20px?0;
}
/*左右margin為auto使按鈕居中，前提是button設(shè)為塊級媳握；去除按鈕默認(rèn)邊框*/
.button{
display:?block;
margin:?0?auto;
padding:?0;
width:?80px;
height:?30px;
border:?none;
border-radius:?5px;
background-color:?blue;
color:?white;
text-align:?center;
}
