1-5、左邊定寬,右邊自适應
1-5.1 什麼是左邊定寬右邊自适應布局?
外層盒子寬度确定情況下,左側盒子寬度不固定,右邊盒子寬度自适應。
1-5.2 如何實作左邊定寬,右邊自适應布局
非嚴格意義:
- float+calc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左邊定寬右邊自适-float+calc</title>
<style>
* {
margin:0;
padding:0;
}
.box-wrapper {
width: 600px;
height: 400px;
border: 1px solid #000;
}
.left-box {
float:left;
width: 200px;
height: 100%;
background: red;
}
.right-box {
float: right;
width: calc(100% - 200px);
height: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>
- inline-block calc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左邊定寬右邊自适-inline-block+calc</title>
<style>
* {
margin:0;
padding:0;
}
.box-wrapper {
width: 600px;
height: 400px;
border: 1px solid #000;
}
.left-box {
display: inline-block;
width: 200px;
height: 100%;
background: red;
}
.right-box {
display: inline-block;
width: calc(100% - 200px);
height: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>
- position padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 左邊定寬右邊自适應 + position + calc</title>
<style>
.box-wrapper {
width: 600px;
height: 400px;
position: relative;
border: 1px solid #000;
}
.left-box {
width: 200px;
height: 100%;
background: red;
position: absolute;
}
.right-box {
padding-left:200px;
height: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>
嚴格意義:
- flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左邊定寬右邊自适 - flex </title>
<style>
.box-wrapper {
width: 600px;
height: 400px;
border:1px solid #000;
/* flex布局 */
display: flex;
}
.left-box {
width: 200px;
height: 100%;
background: red;
}
.right-box {
background: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>
- table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左邊定寬右邊自适 - table 布局 </title>
<style>
.box-wrapper {
width: 600px;
height: 400px;
border: 1px solid #000;
/* table 布局 */
display: table;
}
.left-box {
width: 200px;
height: 100%;
background: red;
display: table-cell;
}
.right-box {
height: 100%;
background: blue;
display: table-cell;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>
- grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左邊定寬右邊自适 + grid 布局</title>
<style>
.box-wrapper {
width: 600px;
height: 400px;
border:1px solid #000;
display: grid;
/* 聲明列的寬度 */
grid-template-columns: 200px auto;
}
.left-box {
background: red;
}
.right-box {
background: blue;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="left-box">
left-box
</div>
<div class="right-box">
right-box
</div>
</div>
</body>
</html>