DIV三列同行

Posted 2020-08-28 hapday

tags:

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>DIV三列同行</title>
	<style type="text/css">
		body { margin : 0; padding : 0; color : white; text-align : center; vertical-align: middle; }
		.left { width : 200px; background-color : red; height : 100px; line-height : 100px; float : left; }
		.center { background-color : yellow; height : 100px; line-height : 100px; color : green; }
		.right { width : 200px; background-color : blue; height : 100px; line-height : 100px; float : right; }
	</style>
 </head>
 <body>
	<div class="left">位于第一行</div>
	<div class="right">位于 center 之前</div>
	<div class="center">位于 right 之后</div>
 </body>
</html>

2、DIV 层的分离：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>DIV层的分离</title>
	<style type="text/css">
		body { margin : 0; padding : 0; color : white; text-align : center; vertical-align: middle;  }
		.left { width : 200px; background-color : red; height : 100px; line-height : 100px; float : left; filter:alpha(opacity=10); opacity: 0.5; }
		.center { background-color : yellow; height : 150px; line-height : 150px; color : green; }
		.right { width : 200px; background-color : blue; height : 100px; line-height : 100px; float : right; filter:alpha(opacity=10); opacity: 0.8; -moz-opacity:0.8; -khtml-opacity: 0.8;  }
	</style>
 </head>
 <body>
	<div class="left">悬浮于 center div 之上，靠左，靠上展示</div>
	<div class="right">悬浮于 center div 之上，紧贴 left div 靠左，靠上展示</div>
	<div class="center">将此 div 的高度设置为 150 像素，大于 left div 和 right div 的高度，我们可以看出，实际上此层是占据了整个一行，left div 和 right div 是悬浮在此 div 之上的；通过设置 eft div 和 right div 的背景色为透明，我们也可以看出层的分离效果。</div>
 </body>
</html>

以上是关于DIV三列同行的主要内容，如果未能解决你的问题，请参考以下文章

div css 设置三列,左右固定宽度，中间自定义宽度，代码如下。 <div class="footer"> <div class="footer-l