一、Flex 布局
<!DOCTYPE html>
<html>
<head>
<title>两列布局-左边固定宽度,右边自适应</title>
<style>
html,body{
margin: 0;
padding: 0;
}
#main{
width: 100%;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
#left{
width:200px;
background: yellow;
}
#right{
background:rgb(0, 255, 34);
flex: auto;
}
</style>
</head>
<body>
<div id="main">
<div id="left">左</div>
<div id="right">右</div>
</div>
<script>
</script>
</body>
</html>
说明:
1. 两列等宽:
#left{
background: yellow;
flex:0 0 50%;
}
#right{
background:rgb(0, 255, 34);
flex:0 0 50%;
}
二、绝对定位
<!DOCTYPE html>
<html>
<head>
<title>两列布局-左边固定宽度,右边自适应</title>
<style>
html,body{
margin: 0;
padding: 0;
}
#main{
width: 100%;
border: 1px solid red;
position: relative;
}
#left{
width:200px;
background: yellow;
position: absolute;
left: 0;
top: 0;
}
#right{
background:rgb(0, 255, 34);
margin-left:200px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">左</div>
<div id="right">右</div>
</div>
<script>
</script>
</body>
</html>
说明:
1. 两列等宽:
// #left
width:50%;
// #right
margin-left:50%;
三、浮动元素
<!DOCTYPE html>
<html>
<head>
<title>两列布局-左边固定宽度,右边自适应</title>
<style>
html,body{
margin: 0;
padding: 0;
}
#main{
width: 100%;
border: 1px solid red;
overflow: hidden;
}
#left{
width:200px;
background: yellow;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
#right{
background:rgb(0, 255, 34);
margin-left:200px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">左</div>
<div id="right">右</div>
</div>
<script>
</script>
</body>
</html>
说明:
1. 当左边浮动元素的高度大于右边的高度时,会出现以下情况:
此时,需要给 right 设置如下CSS样式:
padding-bottom: 9999px;
margin-bottom: -9999px;
2. 当右边的高度大于左边浮动元素的高度时,会出现以下情况:
此时,需要给 right 设置如下CSS样式:
margin-left: 200px;
但还会出现以下情况:
此时,需要给 left 设置如下CSS样式:
padding-bottom: 9999px;
margin-bottom: -9999px;
3. 当内容长度多余宽度时,会自动换到下一行。
4. 两列等宽:
// 修改1:#left
width:50%;
// 修改2:#right
margin-left:50%;
实现两列等宽的第四种方法:inline-block
<!DOCTYPE html>
<html>
<head>
<title>两列布局-两列等宽均分宽度,高度一致</title>
<style>
html,body{
margin: 0;
padding: 0;
}
#main{
width: 100%;
border: 1px solid red;
font-size: 0;
}
#left{
width:50%;
background: yellow;
display: inline-block;
font-size: 12px;
}
#right{
width:50%;
background:rgb(0, 255, 34);
display: inline-block;
font-size: 12px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">左</div>
<div id="right">右</div>
</div>
<script>
</script>
</body>
</html>