關於幾種自適應佈局

類型一

1,左右兩側,左側固定寬度200px,右側自適應佔滿

代碼以下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左右兩側,左側固定寬度200px,右側自適應佔滿</title>
<style>
.box{
    width:600px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}
.right{
    
    height:500px;
    background-color:#00f;
    margin-left:200px;
}

</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html><!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左右兩側,左側固定寬度200px,右側自適應佔滿</title>
<style>
.box{
    width:600px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}
.right{
    
    height:500px;
    background-color:#00f;
    margin-left:200px;
}

</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

運行結果

圖片描述

類型二

2,左中右三列 左右固定200px 中間自適應佔滿

代碼以下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列 左右固定200px 中間自適應佔滿</title>
<style>
.box{
    width:800px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}

.right{
    width:200px;
    height:500px;
    background-color:#00f;
    float:right;
}
.zhong{
    height:500px;
    margin:0 200px;
    background-color:#f0f;
}
</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>
</div>
</body>
</html>

運行結果

圖片描述

類型三

3,上中下三行 頭部200px高 底部200px高 中間自適應佔滿

代碼以下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行 頭部200px高 底部200px高 中間自適應佔滿</title>
<style>
.box{
    width:600px;
    height:400px;
    border:1px solid #ccc;
    margin:0 auto;
    position:relative;
}
.top{
    width:600px;
    height:100px;
    background-color:#ff0;
    position:absolute;
    top:0;
    left:0;
}
.zhong{
    width:100%;
    background-color:#f0f;
    
    position:absolute;
    top:100px;
    bottom:100px;
}
.bottom{
    width:600px;
    height:100px;
    background-color:#f00;
    position:absolute;
    bottom:0;
    left:0;
}
</style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="zhong"></div>
</div>
</body>
</html>

運行結果

圖片描述

總結

  • 固定寬度元素設置float屬性爲left,自適應元素設置margin屬性,margin-left應>=定寬元素寬度。
  • 自適應寬度元素定義一個父標籤,並設置float屬性爲left;width爲100%;自適應寬度元素設置margin,margin-left應>=定寬元素寬度;
  • 固定寬度元素設置margin-left屬性爲負值:-100%;
  • 除此以外應注意HTML結構中應先寫自適應元素,再寫固定寬度元素。
相關文章
相關標籤/搜索