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, content</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. #header, #footer{
  40. 	background-color:#ddd;
  41. 	margin-left:-150px;
  42. 	margin-right:-200px;
  43. 	clear:both;
  44. }
  45. </style>
  46. <style type="text/css">
  47. h2{
  48. 	margin:0;
  49. 	padding:5px;
  50. }
  51. #center h2{
  52. 	background-color:#222;
  53. 	color:#c33;
  54. }
  55. .menu{
  56. 	list-style-type:none;
  57. 	border:1px solid #444;
  58. 	margin:5px;
  59. 	padding:5px;
  60. }
  61. #leftRail h2{
  62. 	background-color:#c33;
  63. }
  64. #rightRail fieldset{
  65. 	border:1px solid #222;
  66. 	margin:5px;
  67. 	padding:5px;
  68. }
  69. .article{
  70. 	border:2px solid #444;
  71. 	margin:5px;
  72. 	padding-top:0;
  73. 	overflow:hidden;
  74. 	padding-left:102px;
  75. }
  76. * html .article{
  77. 	height:1%; /* So IE plays nice */
  78. }
  79. .article p{
  80. 	margin:0;
  81. }
  82. .article h3{
  83. 	background-color:#c93;
  84. 	margin:0 -5px 0 -102px;
  85. 	padding:5px;
  86. 	border-bottom:2px solid #444;
  87. }
  88. .articleContainer{
  89. 	width:100%;
  90. 	border-left:102px solid #699;
  91. 	margin-left:-102px;
  92. 	background-color:#fefefe;
  93. 	display:inline;
  94. 	float:left;
  95. }
  96. .articleContent{
  97. 	width:100%;
  98. 	float:right;
  99. 	border-left:2px solid #444;
  100. 	margin-left:-2px;
  101. 	position:relative;
  102. }
  103. .articleContent p{
  104. 	padding:5px;
  105. }
  106. .articleRail{
  107. 	float:left;
  108. 	width:100px;
  109. 	margin-left:-102px;
  110. 	border-right:2px solid #444;
  111. 	position:relative;
  112. }
  113. </style>
  114. </head>
  115. <body>
  116. 	<div id="header">This is the header</div>
  117. 	<div id="container">
  118.  
  119. 		<div id="center">
  120. 			<h2>Articles</h2>
  121. 			<div class="article">
  122. 				<h3>Article 1</h3>
  123. 				<div class="articleContainer">
  124. 					<div class="articleContent">
  125. 						<p>
  126. 							Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  127. 						</p>
  128.  
  129. 					</div>
  130. 					<div class="articleRail">
  131. 						<ul>
  132. 							<li>This</li>
  133. 							<li>is</li>
  134. 							<li>nested</li>
  135. 							<li>rail</li>
  136.  
  137. 							<li>content</li>
  138. 						</ul>
  139. 					</div>
  140. 				</div>
  141. 			</div>
  142. 			<hr />
  143. 			<div class="article">
  144. 				<h3>Article 2</h3>
  145.  
  146. 				<div class="articleContainer">
  147. 					<div class="articleContent">
  148. 						<p>
  149. 							Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  150. 						</p>
  151. 					</div>
  152. 					<div class="articleRail">
  153. 						<ul>
  154. 							<li>This</li>
  155.  
  156. 							<li>is</li>
  157. 							<li>too</li>
  158. 						</ul>
  159. 					</div>
  160. 				</div>	
  161. 			</div>
  162. 		</div>
  163. 		<div id="leftRail">
  164.  
  165. 			<h2>Menu</h2>
  166. 			<ul class="menu">
  167. 				<li><a href="#">Link Number 1</a></li>
  168. 				<li><a href="#">Link Number 2</a></li>
  169. 				<li><a href="#">Link Number 3</a></li>
  170. 				<li><a href="#">Link Number 4</a></li>
  171.  
  172. 				<li><a href="#">Link Number 5</a></li>
  173. 				<li><a href="#">Link Number 6</a></li>
  174. 				<li><a href="#">Link Number 7</a></li>
  175. 				<li><a href="#">Link Number 8</a></li>
  176. 				<li><a href="#">Link Number 9</a></li>
  177. 				<li><a href="#">Link Number 10</a></li>
  178.  
  179. 				<li><a href="#">Link Number 11</a></li>
  180. 				<li><a href="#">Link Number 12</a></li>
  181. 				<li><a href="#">Link Number 13</a></li>
  182. 				<li><a href="#">Link Number 14</a></li>
  183. 				<li><a href="#">Link Number 15</a></li>
  184. 				<li><a href="#">Link Number 16</a></li>
  185.  
  186. 				<li><a href="#">Link Number 17</a></li>
  187. 				<li><a href="#">Link Number 18</a></li>
  188. 				<li><a href="#">Link Number 19</a></li>
  189. 				<li><a href="#">Link Number 20</a></li>
  190. 			</ul>
  191. 		</div>
  192. 		<div id="rightRail">
  193.  
  194. 			<form action="#">
  195. 			<fieldset>
  196. 				<legend>Search</legend>
  197. 				<input type="text" name="dummy" /><input type="button" name="btn" value="Go" />
  198. 			</fieldset>
  199. 			</form>
  200. 		</div>
  201. 	</div>
  202.  
  203. 	<div id="footer">This is the footer</div>
  204. </body>
  205. </html>

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

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

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

listview 怎么让其中一列自动宽度？

响应式 3 列布局，右列设置为最小宽度

表格列：宽度、最小宽度、自动换行和列“重要性”

iOS 自动布局：3 列标签布局，中间列具有可变宽度