CSS float 語法
float : 參數
參數有 left,right和none分別是『向左浮動』，『向右浮動』和『不要浮動』
範例：我們要將兩個div做並排的效果。
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
CSS
.box1{
background: green;
width:250px;
height: 50px;
}
.box2{
background: red;
width:250px;
height: 50px;
}
呈現效果如下
在沒有使用float 效果的時候你會發現兩個div是沒辦法並排，因為div屬於區塊元素會將整個瀏覽器盛滿。那我們現在將float :left 加到 CSS 中看會出現什麼效果。
.box1{
background: green;
width:250px;
height: 50px;
float:left;
}
.box2{
background: red;
width:250px;
height: 50px;
float:left;
}
沒有留言:
張貼留言