DIV 布局之左右布局左侧自动适应右侧固定
2019-10-27 本文已影响0人
出来混要还的
image.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>左边自动适应，右边固定</title>
<style type="text/css">
html,body {height: 100%;padding: 0; margin: 0; }
.parent{
width:600px;
height: 450px;
position: relative;
background-color: red;
}
.left{
background-color: red;
height: 100%;
width:100%;
float:left;
margin-left:-100px;
}
.right{
width: 100px;
background-color: #E6E9F0;
height: 100%;
float:right;
}
</style>
</head>
<div class="parent">
<div class="left">
<div style="margin-left: 100px;width: 100%;height: 100%;">left</div>
</div>
<div class="right">
right
</div>
</div>
</html>
