面：請用至少三種方式實現左側定寬,右側自適應佈局.
我：好.
方式一：float方式
<html>
<head>
<meta charset="UTF-8">
<title>左邊定寬,右邊自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
height:200px;
}
.leftDiv{
float:left;
width:200px;
height:200px;
background-color: #5A6A94;
}
.rightDiv{
height:200px;
margin-left:210px;
background-color: #EA6F5A;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
方式二：position方式
<html>
<head>
<meta charset="UTF-8">
<title>左邊定寬,右邊自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
position: relative;
height:200px;
}
.leftDiv{
position: absolute;
left:0;
top:0;
width:200px;
height:200px;
background-color: #5A6A94;
}
.rightDiv{
height:200px;
margin-left:210px;
background-color: #EA6F5A;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
方式三：flex方式
<html>
<head>
<meta charset="UTF-8">
<title>左邊定寬,右邊自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
display: flex;
height:200px;
}
.leftDiv{
width:200px;
background-color: #5A6A94;
}
.rightDiv{
flex: 1 1 auto;
height:200px;
margin-left:10px;
background-color: #EA6F5A;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
面：你還能想到其它的實現方式嗎？
我：是的.
面：請口述一下.
我：雙float+calc，將標籤元素以表格單元格的形式呈現display:table-cell; 等
面：ok 我們繼續下一題.
我：好.