一列寬度固定一列寬度自適應佈局

admin發表於2018-08-17

容器元素的尺寸可能是不固定的，比如顯示器解析度的不同。

可能會導致頁面佈局出現各種各樣的問題，例如導致佈局錯亂。

所以需要根據父元素尺寸的不同，調整子元素的尺寸以做到最佳佈局效果。

這時候，一列寬度固定一列寬度自適應佈局的優勢就得以體現。

下面以左側div寬度固定，右側div寬度是自適應為例介紹一下如何實現此佈局。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body{
  margin:0;
  padding:0;
  font-size:30px;
  font-weight:bold;
}
.left,
.right {
  text-align: center;
}
.left{
  width:200px;
  height: 600px;
  background: #ccc;
  position:absolute;
  left:0px;
}
.right{
  height: 600px;
  background: #FCC;
  margin-left:200px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

上面程式碼實現左側div寬度固定，右側寬度自適應效果。

一.實現原理:

[CSS] 純文字檢視 複製程式碼
body{
  margin:0;
  padding:0;
  font-size:30px;
  font-weight:bold;
}

將內外邊距都是設定為零0，設定字型大小和粗細，非常簡單，不用多說。

[CSS] 純文字檢視 複製程式碼
.left{
  width:200px;
  height: 600px;
  background: #ccc;
  position:absolute;
  left:0px;
}

左側尺寸固定的元素，寬度是200px，以後也不再變動。

採用採用絕對定位，並且left屬性值為0。

那麼無論父元素如何縮放，它都會緊貼著父元素左壁

[CSS] 純文字檢視 複製程式碼
.right{
  height: 600px;
  background: #FCC;
  margin-left:200px;
}

首先此元素沒有設定寬度，預設塊級元素在橫向上會盡量填充滿父元素。

又由於左側元素是絕對定位，按照理論，right元素會在橫向上填滿body元素，左側元素會覆蓋在它上面。

最後使用margin-left設定right元素的做外邊距，外邊距的值恰好是左側元素的寬度。

這樣實現了左右元素緊鄰，且右側元素寬度自適應。

二.相關閱讀:

（1）.position屬性參閱CSS position:absolute 絕對定位一章節。

（2）.margin屬性參閱CSS margin外邊距一章節。

相關文章