課程
/前端開發
/HTML/CSS
/如何用CSS進行網頁布局
左側是固定寬度 比如說是100px,而右邊的寬度要占滿剩余部分,即100%-100px
CSS3中可以使用calc(100% - 100px)來實現,但是CSS兼容問題 iE9以下都不識別,請問有其他辦法來實現嗎?
2016-11-04
源自:如何用CSS進行網頁布局 3-1
正在回答
外層div清一下浮動就可以用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
? ? ? ? ? ? ?width: 100px;
? ? ? ? ? ? ?height: 500px;
? ? ? ? ? ? ?background: red;
? ? ? ? ? ? ?float: left;
}
.two{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? background: blue;
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
用position:absolute;定位,然后左側外邊距設置為100px;
舉報
用最簡潔的案例教你布局的那些知識,這是前端工程師基本技能
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-06-27
外層div清一下浮動就可以用了
2018-06-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
? ? ? ? ? ? ?width: 100px;
? ? ? ? ? ? ?height: 500px;
? ? ? ? ? ? ?background: red;
? ? ? ? ? ? ?float: left;
}
.two{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? background: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
2016-11-04
用position:absolute;定位,然后左側外邊距設置為100px;