1.采用浮动
<style>
.outer{
height: 100px;
}
.left{
float:left;
height: 100px;
width: 200px;
background-color: rgb(36, 70, 133);
}
.right{
height: 100px;
width:auto;
margin-left:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
2.flex布局
参考链接：zhuanlan.zhihu.com/p/25303493
<style>
.outer{
height: 100px;
display:flex;
}
.left{
height: 100px;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 200px;
background-color: green;
}
.right{
height: 100px;
flex:auto;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
3.绝对定位
*{
margin:0;
padding:0;
}
.outer{
position:relative
}
.left{
height: 100px;
width: 200px;
position:absolute;
left:0;
top:0;
background-color: green;
}
.right{
height: 100px;
margin-left:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
