CSS 元素并排

最新推荐文章于 2023-07-19 19:46:44 发布

weixin_30745553

最新推荐文章于 2023-07-19 19:46:44 发布

阅读量853

点赞数

原文链接：http://www.cnblogs.com/lszw/p/10839044.html

版权

利用CSS的float属性可以将元素并排，做出三列并排的布局。
如这样的效果
实现的原理：只要将3个元素设置float属性，属性值为left，同时指定不同比例的宽度，及高度。
下面是实现代码
 
  <!DOCTYPE html> 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  title 
  >元素并排</ 
  title 
  > 
 
  < 
  meta 
  charset 
  = 
  "UTF-8" 
  > 
 
  < 
  style 
  type 
  = 
  "text/css" 
  > 
 
  body{margin:0px;padding:0px;} 
 
  .column1{ 
 
  float:left; 
 
  width:33.33333%; 
 
  min-height:800px; 
 
  } 
 
  div{color:#fff;} 
 
  .column2{ 
 
  float:left; 
 
  width:33.33333%; 
 
  min-height:800px; 
 
  } 
 
  .column3{ 
 
  float:left; 
 
  width:33.33333%; 
 
  min-height:800px; 
 
  }            
 
  </ 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  h1 
  >软件开发，成就梦想</ 
  h1 
  > 
 
  < 
  h2 
  >< 
  a 
  href 
  = 
  "https://www.liyongzhen.com/" 
  >学编程，上利永贞网</ 
  a 
  ></ 
  h2 
  > 
 
  < 
  div 
  > 
 
  < 
  div 
  class 
  = 
  "column1" 
  >column1</ 
  div 
  > 
 
  < 
  div 
  class 
  = 
  "column2" 
  >column2</ 
  div 
  > 
 
  < 
  div 
  class 
  = 
  "column3" 
  >column3</ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  > 
 
两行三列上面的例子是三列，每列宽度和高度都相同。
下面例子是两行三列，宽度一样，高度不同，运行效果如下：
 
   <!DOCTYPE html> 
  
   < 
   html 
   > 
  
   < 
   head 
   > 
  
   < 
   title 
   >元素并排</ 
   title 
   > 
  
   < 
   meta 
   charset 
   = 
   "UTF-8" 
   > 
  
   < 
   style 
   type 
   = 
   "text/css" 
   > 
  
   body { 
  
   width: 750px; 
  
   color: #fff;} 
  
   p { 
  
   width: 230px; 
  
   float: left; 
  
   margin: 5px; 
  
   padding: 5px; 
  
   Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 16px; color: rgb(255, 255, 255); border-radius: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important;">        </style> 
  
       </head> 
  
       <body> 
  
           <h1 style="color:#706fd3">软件开发，成就梦想</h1> 
  
           <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2> 
  
           <p>CSS是一个描述HTML文档的样式语言。CSS描述HTML元素的显示方式。</p> 
  
           <p>本教程将教你CSS从基础到网页布局，学完本教程，可以设计出漂亮的网站。本教程需要HTML知识为基础，学习HTML前往《HTML 教程》</p> 
  
           <p>你只需下载一个Chrome浏览器和一个Notepad++一样的文本编辑器，另加一个取色器软件，无需其它工具。</p> 
  
           <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 
  
           教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习，过一阵子回过送来，你会豁然开朗，原来如此呀。</p> 
  
           <p>将示例代码，敲入你的文本编辑器，保存，用Chrome浏览器打开；这样的事做得越多，你越有自信。 
  
           <p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表， 
  
           一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p> 
  
       </body> 
  
   </html> 
  
    在第2行一第一列出现了浮动，它跑到第一行的第3列下面。原因是第1行的第2列的高度比第1行第3例的高度高，挡住了第2行第1列。