使两列相等

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使两列相等相关的知识，希望对你有一定的参考价值。

Equalizing Two Column Layout with Full Width Header ~ Fixed Width Content
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. 	<head>
  4. 		<title>Equalizing Two Column Layout</title>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  6. 		<meta http-equiv="imagetoolbar" content="no"/>
  7. 		<style type="text/css">        
  8. /*----------  Resets ----------*/
  9. body, address, blockquote, dl, ol, ul, li, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
  10.     margin:0;
  11.     padding:0;
  12. } /*--- End Reset ---*/
  13. body {
  14.     font: 100% arial;
  15.     background: #CCC;
  16. }
  17. h2,h3,h4 {padding: .5em .5em 0 .5em; text-align:center;}
  18. p {padding: 0.5em;}
  19. .left {text-align:left;}
  20.  
  21. #header {
  22.     height: 115px;
  23.     width:100%;
  24.     min-width:960px;
  25.     margin-bottom:-115px;
  26.     background-color: #FFF;
  27.     position:relative;
  28. }
  29. #main {
  30.     background: silver; /*left sidebar color*/
  31.     margin: 0 auto;
  32.     width: 960px;   
  33. }
  34. #clearheader{
  35.     height:115px;
  36.     background: #CCC;      
  37. }             
  38. #navbar {
  39.     height: 50px;
  40.     background: silver;
  41.     border-bottom: 20px solid #CCC;
  42. }
  43. #container {
  44.     background: #FFF; /*Main Content Color*/
  45.     margin-right: 220px;
  46. }
  47. #innerwrap {
  48.     background: #FFF; /*Main Content Color*/
  49.     float: left;
  50.     border-right:20px solid #CCC;
  51.     width:100%;
  52. }
  53. #sidebar {
  54.     float: right;
  55.     margin-right: -220px; /*make room for 20px border*/
  56.     position: relative;        /* fixes an IE 6 bug */
  57.     width: 200px;
  58. }
  59. #content {/* style rules for the content go here */}
  60.  
  61. #footer {
  62.     background: silver;
  63.     clear: both;
  64.     text-align: center;
  65.     height:2em;
  66.     line-height:2em;
  67.     border-top: 20px solid #CCC;
  68. }
  69. 		</style>
  70. 	</head>
  71. 	<body>
  72. <!--[if gte IE 6 ]>
  73. <style type="text/css">    
  74. #sidebar {margin-left:20px;} /* needed for IE7 sidebar alignment */
  75. #innerwrap {margin-right:-20px}/* needed for IE6 border alignment */
  76. * html #header { /*min-width for IE6*/
  77.     width: 100%; /* Fallback width if javascript is off */
  78.     width: expression(  
  79.     (document.documentElement.clientWidth < 962) ? "960px" : "auto");
  80. }    
  81. </style>
  82. <![endif]-->
  83. 		<div id="header">
  84. 			<h2>Equalizing Two Column Layout</h2>
  85. 			<h3>Full Width Header ~ Fixed Width Content</h3>
  86. 		</div><!-- end #header -->
  87. 		<div id="main">
  88. 			<div id="clearheader"></div>
  89. 			<div id="container">
  90. 				<div id="innerwrap">
  91. 					<div id="sidebar">
  92. 						<h4>Left Column</h4>
  93. 						<p>
  94. 							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
  95. 							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
  96. 							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
  97. 							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
  98. 							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
  99. 							elementum et, urna. Proin vehicula viverra sapien.
  100. 						</p>
  101. 					</div>
  102. 					<div id="content">
  103. 						<div id="navbar">
  104. 							<h4>Navbar</h4>
  105. 						</div>
  106. 						<h4 class="left">Main Content</h4>
  107. 						<p>
  108. 							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
  109. 							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
  110. 							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
  111. 							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
  112. 							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
  113. 							elementum et, urna. Proin vehicula viverra sapien.
  114. 						</p>
  115. 						<p>
  116. 							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
  117. 							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
  118. 							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
  119. 							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
  120. 							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
  121. 							elementum et, urna. Proin vehicula viverra sapien.
  122. 						</p>
  123. 					</div><!-- end #content -->
  124. 				</div><!-- end #innerwrap -->
  125. 			</div><!-- end #container -->
  126. 			<div id="footer">
  127. 				<h5>your copyright &copy; 2006-2008, &amp; other footer stuff here</h5>
  128. 			</div>
  129. 		</div>
  130. 	</body>
  131. </html>

以上是关于使两列相等的主要内容，如果未能解决你的问题，请参考以下文章

如何使两列格式相同的页面？ [复制]

使两列分别可滚动和视口剩余长度的高度

Android Studio CardView 有两列宽度相等

如何检查两列是不是相同/相等？

C# datatable 按照两列排序 当A列值相等时，再按照B列排序

ORM：续集：为两列添加不相等的约束