3列，液体宽度，左侧轨道

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3列，液体宽度，左侧轨道相关的知识，希望对你有一定的参考价值。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>3 columns, liquid width, left rail tallest</title>
  7. <style type="text/css">
  8. body{
  9. 	margin:0 100px;
  10. 	padding:0 200px 0 150px;
  11. }
  12. #container{
  13. 	background-color:#9cc;
  14. 	float:left;
  15. 	width:100%;	
  16. 	border-left:150px solid #cf9; /* The width and color of the left rail */
  17. 	border-right:200px solid #c33; /* The width and color of the right rail */
  18. 	margin-left:-150px;
  19. 	margin-right:-200px;
  20. 	display:inline; /* So IE plays nice */
  21. }
  22. #leftRail{
  23. 	float:left;
  24. 	width:150px;
  25. 	margin-left:-150px;
  26. 	position:relative;
  27. }
  28. #center{
  29. 	float:left;
  30. 	width:100%;
  31. 	margin-right:-100%;
  32. }
  33. #rightRail{
  34. 	float:right;
  35. 	width:200px;
  36. 	margin-right:-200px;
  37. 	position:relative;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. 	<div id="container">
  43. 		<div id="center">CENTER COLUMN CONTENT</div>
  44. 		<div id="leftRail">LEFT<br /> RAIL</div>
  45.  
  46. 		<div id="rightRail">RIGHT RAIL</div>
  47. 	</div>
  48. </body>
  49. </html>

以上是关于3列，液体宽度，左侧轨道的主要内容，如果未能解决你的问题，请参考以下文章

2列，液体，左侧轨道，轨道最高

CSS 3列，液体宽度，含量

3列，液体宽度，含量

如何在 Qt Creator 中用行号减小列的宽度？

第八课《复杂页面实现》

pandas使用pad函数向dataframe特定数据列的每个字符串添加前置（前缀）补齐字符或者字符串向所有字符串的左侧填充直到宽度达到指定要求（left padding）