2010年4月2日

css 小記

User： Class： ,

研究浮動排列
image 

body{
    width:1000px;
    margin: 0 auto;
}
 
.body{
    position: relative;
    padding:5px;
    background-color:red;
}
 
.top{
    position: relative;
    width:100%;
    height:100px;
    background-color:#fff;
}
 
.c{
    position: relative;
    top:5px;
    
    width:100%;
    height:600px;
    background-color:#fff;
}
.main{
    position: relative;
    display:inline-block;
    float:left;
    width:80%;
    top:5px;
    margin-left: 5px;
    border: 2px solid #ff8000;
}
.left{
    position: relative;
    display:inline-block;
    float:left;
    width:18%;
    top:5px;
    margin-left: 5px;
    border: 2px solid #ff8000;
}

 
<div class="body">
    <div class="top">top</div>
    <div class="c">
        <div  class="main">
            main<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
        </div >
        <div  class="left">
            left<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
        </div >
    </div>
</div>

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)