<html>
<head>
//方法1
<style>
/* .parent{
display: fles;
display: -webkit-flex;
}
.left-child{
flex:0 100px;
background: #22bd7a;
}
.right-child{
flex:1;
background: #f60;
} */
</style>
//方法2
<style>
/* .left-child{
width: 100px;
float:left;
background: #F60;
}
.right-child{
overflow: hidden;
background: #22bd7a;
} */
</style>
//方法3
<style>
/* .left-child{
width: 100px;
float:left;
background: #f60;
}
.right-child{
margin-left: 100px;
background: #22bd7a;
} */
</style>
//方法4
<style>
/* .parent{
position: relative;
}
.left-child{
position: absolute;
width: 100px;
top: 0;
left: 0;
background: #f60;
}
.right-child{
margin-left: 100px;
background: #22bd7a;
} */
</style>
//方法5
<style>
.parent{
position: relative;
padding-left: 100px;
}
.left-child{
position: absolute;
left: 0;
top: 0;
width: 100px;
background: #f60;
}
.right-child{
top: 0;
right: 0;
background: #22bd7a;
}
</style>
</head>
<body>
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
</div>
</body>
</html>
No.1 实现两列布局 一列定宽
最新推荐文章于 2024-06-13 14:28:39 发布