[CSS]两栏自适应布局

方法一：margin-left/right实现
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	div {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 		
  11. 	}
  12. 	img {
  13. 		width:200px;
  14. 		height:200px;
  15. 		float:left;
  16. 	}
  17. 	p {
  18. 		margin-left:200px;
  19. 	}
  20.   </style>
  21.  </head>
  22.  <body>
  23. 	<div>
  24. 		<img src="1.jpg">
  25. 		<p>box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到现在，体现的尽是drop-shadow的不好，兼容性不够，内阴影不支持，多阴影也不支持；感觉就像是小蚯蚓，失恋了，工作也没了，存在的意义好像就成了白富美的谈资。真的是这样吗？显然非也！所谓存在既有道理。rop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。</p>
  26. 	</div>
  27.  </body>
  28. </html>

方法二：padding-left/right实现
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	div {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 		
  11. 	}
  12. 	img {
  13. 		width:200px;
  14. 		height:200px;
  15. 		float:left;
  16. 	}
  17. 	p {
  18. 		padding-left:200px;
  19. 	}
  20.   </style>
  21.  </head>
  22.  <body>
  23. 	<div>
  24. 		<img src="1.jpg">
  25. 		<p>box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到现在，体现的尽是drop-shadow的不好，兼容性不够，内阴影不支持，多阴影也不支持；感觉就像是小蚯蚓，失恋了，工作也没了，存在的意义好像就成了白富美的谈资。真的是这样吗？显然非也！所谓存在既有道理。rop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。</p>
  26. 	</div>
  27.  </body>
  28. </html>

方法三：overflow:hidden实现（BFC化）
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	div {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 		
  11. 	}
  12. 	img {
  13. 		width:200px;
  14. 		height:200px;
  15. 		float:left;
  16. 	}
  17. 	p {
  18. 		border:1px solid green;
  19. 		overflow:hidden;
  20. 	}
  21.   </style>
  22.  </head>
  23.  <body>
  24. 	<div>
  25. 		<img src="1t.jpg">
  26. 		<p>box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到现在，体现的尽是drop-shadow的不好，兼容性不够，内阴影不支持，多阴影也不支持；感觉就像是小蚯蚓，失恋了，工作也没了，存在的意义好像就成了白富美的谈资。真的是这样吗？显然非也！所谓存在既有道理。rop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。</p>
  27. 	</div>
  28.  </body>
  29. </html>

方法四：float元素加margin（超出float元素高度后还是会出现环绕）
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	div {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 		
  11. 	}
  12. 	img {
  13. 		width:200px;
  14. 		height:200px;
  15. 		float:left;
  16. 		margin-right:40px;
  17. 	}
  18. 	p {
  19. 		border:1px solid green;
  20. 	}
  21.   </style>
  22.  </head>
  23.  <body>
  24. 	<div>
  25. 		<img src="1t.jpg">
  26. 		<p>box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到现在，体现的尽是drop-shadow的不好，兼容性不够，内阴影不支持，多阴影也不支持；感觉就像是小蚯蚓，失恋了，工作也没了，存在的意义好像就成了白富美的谈资。真的是这样吗？显然非也！所谓存在既有道理。rop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。</p>
  27. 	</div>
  28.  </body>
  29. </html>

方法五：display:table-cell（兼容IE7及以下）
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	div {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 		
  11. 	}
  12. 	img {
  13. 		width:200px;
  14. 		height:200px;
  15. 		float:left;
  16. 		
  17. 	}
  18. 	p {
  19. 		border:1px solid green;
  20. 		display:table-cell;//IE8+ BFC
  21. 		width:2000px;
  22. 		*display:inline-block;//IE7- 伪BFC
  23. 		*width:auto;
  24. 	}
  25.   </style>
  26.  </head>
  27.  <body>
  28. 	<div>
  29. 		<img src="1t.jpg">
  30. 		<p>box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到现在，体现的尽是drop-shadow的不好，兼容性不够，内阴影不支持，多阴影也不支持；感觉就像是小蚯蚓，失恋了，工作也没了，存在的意义好像就成了白富美的谈资。真的是这样吗？显然非也！所谓存在既有道理。rop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。</p>
  31. 	</div>
  32.  </body>
  33. </html>

方法六：负边距实现
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	#left {
  8. 		background-color: green;
  9.         float: left;
  10.         width: 220px;
  11. 		margin-right: -100%;
  12. 	}
  13. 	#content {
  14.         float: left;
  15.         width: 100%;
  16.         }
  17. 	#contentInner {
  18. 		margin-left: 220px;
  19. 		background-color: orange;
  20. 	}
  21.   </style>
  22.  </head>
  23.  <body>
  24. 	<div id="left">
  25.         <h1>Left Sidebar</h1>
  26.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  27.     </div>
  28.     <div id="content">
  29.         <div id="contentInner">
  30.             <h1>Main content</h1>
  31.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  32.         </div>
  33.     </div>
  34.  </body>
  35. </html>

posted @ 2017-05-09 14:32  enginex  阅读(1847)  评论(0)  编辑  收藏  举报