左侧盒子固定宽度,右边盒子自适应,右侧里左边盒子自适应,右边盒子固定宽度

公司ui写给我的自适应盒子
左侧盒子固定宽度,右边盒子自适应,右侧里左边盒子自适应,右边盒子固定宽度_第1张图片

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<style>
body{min-width:1280px;}
.box01{ background:#000; height:500px; position:relative;}
.l{background:#ff0000; width:200px; height:500px; position:absolute; left:0; top:0}
.r{ background:#cc0000; margin-left:210px; height:500px; position:relative}
.a{background:#00cc00; width:200px; height:500px; position:absolute; right:0; top:0}
.b{ background:#00cc00; margin-right:210px; height:500px}
style>
head>

<body>

<div class="box01" style="margin:0 20px">

<div class="l">ldiv>
<div class="r">
	<div class="a">adiv>
    <div class="b">bdiv>

div>

div>


body>
html>

你可能感兴趣的:(前端)