文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

首頁 > web前端 > css教學 > 主體

左側固定，右側自適應

高洛峰

發布： 2017-02-24 13:39:04

原創

1131 人瀏覽過

本文主要介紹了左側固定，右側自適應的兩種實現方法，相信對大家學習網頁佈局會有很好的幫助，下面就跟小編一起來看下吧

第一種方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>

登入後複製

#第二種方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>

登入後複製

更多左側固定，右側自適應相關文章請追蹤PHP中文網！

相關標籤：

固定自适应

來源：php.cn

上一篇：絕對定位元素的水平垂直居中的方法下一篇：CSS3實作扇形動畫選單實例

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章