方法一：左边浮动，右边设置margin-left
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.box{
border:1px solid red;
width:100%;
}
.one{
border:1px dotted red;
margin:5px 0px ;
/*左侧设置向左浮动（让左侧的div脱离文档流），和固定宽度*/
float:left;
width:200px;
}
.two{
border:1px dashed red;
margin:5px 0px;
/*右侧设置左边距（应大于或等于左侧div的width）*/
margin-left:210px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
盒子里的第一div
</div>
<div class="two">
盒子里的第二个div
</div>
</div>
</body>
</html>
方法二：利用flex布局
<!DOCTYPE html>
<html>
<head>
<title>测试页面</title>
<style type="text/css">
.container{
height:200px;
width:800px;
border:1px dotted pink;
padding:10px;
/*给容器设置flex布局和flex方向*/
display:flex;
flex-direction: row;
}
.one{
border:1px dotted pink;
height:200px;
/*给左侧设置固定宽度*/
width:50px;
}
.two{
border:1px dotted pink;
/*第二个设置width100%*/
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="one">我是第一列</div>
<div class="two">我是第二列</div>
</div>
</body>
</html>
方法三：利用calc()函数
<!DOCTYPE html>
<html>
<head>
<title>测试页面</title>
<style type="text/css">
.one,.two{
border:1px solid pink;
}
.one{
float:left;
width:200px;
text-align:center;
}
.two{
float:right;
width:calc(100% - 200px - 4px);
}
</style>
</head>
<body>
<div class="container">
<div class="one">我是第一列</div>
<div class="two">我是第二列</div>
</div>
</body>
</html>
