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

Posted

tags:

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

  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>2 columns, liquid, left rail, rail tallest</title>
  7. <style type="text/css">
  8. #header, #footer{
  9. 	background-color:#ddd;
  10. 	margin:0 100px;
  11. }
  12. #container{
  13. 	background-color:#9cc;
  14. 	overflow:hidden;
  15. 	margin:0 100px;
  16. 	padding-left:150px; /* The width of the rail */
  17. }
  18. * html #container{
  19. 	height:1%; /* So IE plays nice */
  20. }
  21. #content{
  22. 	background-color:#9cc;
  23. 	width:100%;
  24. 	border-left:150px solid #c33; /* The width and color of the rail */
  25. 	margin-left:-150px; /* Hat tip to Ryan Brill */
  26. 	float:right;
  27. }
  28. #rail{
  29. 	background-color:#c33;
  30. 	width:150px;
  31. 	float:left;
  32. 	margin-left:-150px;
  33. 	display:inline; /* So IE plays nice */
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. 	<div id="header">HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER</div>
  39. 	<div id="container">
  40. 		<div id="content">This is some content This is some content This is some content</div>
  41.  
  42. 		<div id="rail">This is<br />the rail</div>
  43. 	</div>
  44. 	<div id="footer">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER</div>
  45. </body>
  46. </html>

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

CSS 2柱，液体，右轨，轨道最高

CSS 3列，液体宽度，左侧导轨最高

人工智能轨道交通行业周刊-第25期（2022.11.28-12.4）

人工智能轨道交通行业周刊-第25期（2022.11.28-12.4）

列车厢调度

列车厢调度（C语言）