css布局

最新推荐文章于 2024-05-10 09:47:03 发布

Pure_Eyes

最新推荐文章于 2024-05-10 09:47:03 发布

阅读量347

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Pure_Eyes/article/details/49834897

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

</pre>  利用div进行布局时，当指定宽度时不能将display设为inline，如果这样做了width与height的设定就会失效。<p></p><p><span style="font-size:18px">而如果想让两个div层并列的话，若是指定直接高宽的话可以用float属性设为left与right。但是如果要div根据浏览器的变化自适应宽度的话，不设置width，设为right的div属性的div层就无法自己改变宽度如</span></p><p><span style="font-size:18px"><img src="https://img-blog.csdn.net/20151114124713404?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></p><p><span style="font-size:18px"><img src="" alt="" /></span></p><p><span style="font-size:18px">要显示这样的效果，代码为</span></p><p><span style="font-size:18px"></span></p><pre name="code" class="html"><!DOCTYPE HTML >
<html>
  <head>    
    <title>云盘</title>	
    <style type="text/css">
    body{
    	margin:0;
    }
    	#side{
    		height:600px;
    		width:20%;
    		background:#17EA50; 
float:left;			
    	}
    	#main{
    		height:600px;
			width:80%;
			background:red; 
    		float:right; 		   		    		
    	}
    </style>
  </head>  
  <body>
		<div id="side">  	
			</div>
			<!-- side End! -->	  
   	  	<div id="main">  			
   	  	</div>
   	  	<!-- main End! -->
  </body>
</html>

这个代码已经指定了右边div的宽度，若是不指定，则效果为

从中可以看出右面div的宽度为0,。

如果设置了左边div的宽度，而右边div的宽度自适应屏幕的话可以设置右边div的margin-left来调节。例如设置左边div宽度为width:20%; float:left;右边div层不要设置float，将margin-left设为20%；此时右边就可以从左边div层右边界开始向右自动延伸形成上面第一种效果