HTML
flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
display: flex;
height: 200px;
text-align: center;
}
.left {
width: 200px;
height: 200px;
background-color: #4cae4c;
}
.right {
flex: 1;
height: 200px;
background-color: #8a6d3b;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
浮动+BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
height: 200px;
text-align: center;
}
.left {
height: 200px;
width: 350px;
float: left;
background-color: #4cae4c;
}
.right {
height: 200px;
overflow: hidden;
background-color: #8a6d3b;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">左边</div>
<div class="right">同样利用浮动,左边元素宽度固定 ,设置向左浮动。右侧元素设置 overflow: hidden;
这样右边就触发了 BFC ,BFC 的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠。</div>
</div>
</body>
</html>
浮动+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
height: 300px;
text-align: center;
}
.left {
width: 200px;
height: 300px;
float: left;
background-color: #2aabd2;
}
.right {
height: 300px;
margin-left: 200px;
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
height: 100px;
position: relative;
text-align: center;
}
.left {
height: 100%;
width: 100px;
position: absolute;
background-color: #2aabd2;
}
.right {
height: 100px;
margin-left: 200px;
background-color: #1b6d85;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>