1: 浮动加上BFC(overflow: hidden)
<style>
#app {
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
color: #ffffff;
}
.left {
width: 200px;
float: left;
background-color: #0f0;
}
.right {
overflow: hidden;
background-color: #f00;
}
</style>
</head>
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
2: 定位加上margin
<style>
#app {
width: 100%;
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
color: #ffffff;
overflow: hidden;
position: relative;
}
.left,.right {
position: absolute;
}
.left {
width: 200px;
background-color: #0f0;
left: 0;
}
.right {
margin-left: 200px;
width: 100%;
background-color: #f00;
}
</style>
</head>
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
3: 浮动 加上calc
<style>
#app {
width: 100%;
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
color: #ffffff;
overflow: hidden;
position: relative;
}
.left,.right {
float: left;
}
.left {
width: 200px;
background-color: #0f0;
}
.right {
width: calc(100% - 200px);
background-color: #f00;
}
</style>
</head>
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
4: flex布局
<style>
#app {
width: 100%;
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
color: #ffffff;
display: flex;
}
.left {
width: 200px;
background-color: #0f0;
}
.right {
flex: 1;
background-color: #f00;
}
</style>
</head>
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
5: grid布局
<style>
#app {
width: 100%;
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
color: #ffffff;
display: grid;
grid-template-columns: 200px auto;
}
.left {
/* width: 200px; */
background-color: #0f0;
}
.right {
flex: 1;
background-color: #f00;
}
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
6: table布局
<style>
#app {
width: 100%;
height: 500px;
line-height: 500px;
text-align: center;
color: #ffffff;
display: table;
overflow: hidden;
}
.left {
background-color: #0f0;
width: 200px;
}
.right {
width: 100%;
display: table-cell;
background-color: #f00;
text-align: left;
}
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
7:定位布局
<style>
#app {
width: 100%;
height: 500px;
line-height: 500px;
text-align: center;
color: #ffffff;
display: table;
overflow: hidden;
}
.left {
background-color: #0f0;
width: 200px;
}
.right {
width: 100%;
display: table-cell;
background-color: #f00;
text-align: left;
}
<body>
<div id="app">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>