效果图1效果图2

例1.

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>动态单列布局</title>

<style type="text/css">

#header,#content,#footer{

         background-color:#ccc;

         border:1px solid #0ca;

         height:30px;

         width:80%;

         margin:10px auto;}

#content{ height:500px;}

#left{

         height:500px;

         width:100%;

         float:left;

         margin-left:-104px;}

#right{

         width:100px;

         height:500px;

         float:right;

         border:1px solid #0F3;

         background:#9CF;}

#varleft{height:500px;

         border:1px red solid;

         background:#FCF;

         margin-left:104px;

         overflow:hidden; }

</style>

</head>

 

<body>

<div id="header"></div>

<div id="content">

<div id="left">

<div id="varleft"></div></div>

<div id="right">解放路的绿色科技国际饭店了科技的经费了多家机构反倒是的警方根据当时多少积</div>

</div>

<div id="footer">

</div>

</body>

</html>