Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" />
<title> Mixed Layout programming challenges </title>
<style type= "Text/css" >
/*
body{margin:0; padding:0; font-size:30px; color: #fff}
. Top{width:100%;background-color: #ccc;}
. Main{width:100%;height:350px;overflow:hidden;background-color: #f90;}
. left{width:200px;height:inherit;background-color: #6495ED; float:left;}
. Right{width:55%;height:inherit;float:right;background-color:lightgreen;}
. Foot{width:100%;background-color: #DC143C;}
*
* 1-1: I intend to write this, very not advanced, especially to the right, according to the changes in the page, he will be left to squeeze away; My brother's code is as follows: */
. top{width:100%; Height:50px;background: #ccc;}
. main{width:100%;/*width:1000px;*/position:relative;height:300px;background: #f90;}
. Foot{width:100%;height:100px;background-color: #DC143C;}
/*.left{width:200px;height:300px;background: #6495ED;p Osition:absolute;} */
/* the second kind of problem */
/*2-2: Why do we have to absolute? He is relative to body ah here, when main is fixed value is also universal? */
/*2-3: The experiment proves that it is not possible */
/*2-4: Both his methods, It also keeps the right box out and the horizontal scroll bar. */
/*.right{margin-left:210px;width : 100%;height:300px;background:lightgreen;position:absolute;} */
/*1-1: In fact, first let the right self-adaptation, I think of the width100%, but will leave the left covered. I didn't think Margin-left! */
/* The third method is available */
. Left{width:200px;height:300px;background: #6495ED;p osition:absolute;left:0;top:0;}
/* Use left:0,top:0 to fix left position. Then use right margin-left to give the left position.
. right{height:300px;/*width:100%;*/background:lightgreen;margin-left:210px;}
/*right does not set the width, if the width is set to 100%, the horizontal bar will appear */
/* Fourth type can also */
/*.main{width:100%;height:300px;background-color:red;}
.left{width:200px;height:300px; Background-color:blue;float:left;}
. right{height:300px;background-color:green;position:absolute;left:210px;right:0px;} */
/* method is to use the left floating fixed width, the right side through absolute positioning, *//*right not set width, if the width of 100%, there will be a horizontal bar */
/*
Summarize
* Universal is through the position of the relative, absolute positioning, ++top,right,left, or through the movement of margin, to achieve the effect. There is no clear float here at foot. It doesn't seem to be clear that there is any effect.
*
* */
</style>
<body>
<div class= "Top" >top</div>
<div class= "Main" >
<div class= "Right" >right</div><!--implementation first load-
<div class= "left" >left</div>
</div>
<div class= "Foot" >foot</div>
</body>
Css-several ways to mix layouts (the right method and the wrong reason)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
