多列等高布局

最新推荐文章于 2024-09-06 15:49:09 发布

qq_22317389

最新推荐文章于 2024-09-06 15:49:09 发布

阅读量271

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_22317389/article/details/80041862

版权

HTML5 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

主要利用padding-bottom将列高撑开，在将margin-bottom设为负值，其原高度不变

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  body{ 
 
  margin: 
  50px; 
 
   } 
 
  #container{ 
 
  width: 
  100%; 
 
  overflow: 
  hidden; 
 
  /*  
 
   隐藏高度不同的列的方法： 
 
   padding-bottom: 500px; 
 
   margin-bottom: -500px; 
 
   以上两句使得画面的实际高度不变，但是背景告诉依然为800px； 
 
   overflow: hidden; 
 
   之后利用overflow将背景之外的高度隐藏 
 
   */ 
 
   } 
 
  .col{ 
 
  color: 
  white; 
 
  padding: 
  20px; 
 
  background-color: 
  rgb( 
  46, 
  174, 
  248); 
 
  font-family: 
  'Times New Roman', 
  Times, 
  serif; 
 
  width: 
  33.33%; 
 
  float: 
  left; 
 
  box-sizing: 
  border-box; 
 
  text-align: 
  center; 
 
  padding-bottom: 
  500px; 
 
  margin-bottom: 
  -500px; 
 
   } 
 
  .col img{ 
 
  padding-top: 
  20px; 
 
  padding-bottom: 
  10px; 
 
  width: 
  30%; 
 
   } 
 
  .col h1{ 
 
  font-size: 
  100px; 
 
   } 
 
  .col p{ 
 
  font-size: 
  60px; 
 
   } 
 
  .col:nth-child( 
  2 
  ){ 
 
  background-color: 
  rgb( 
  128, 
  184, 
  233); 
 
   } 
 
  .col:nth-child( 
  3 
  ){ 
 
  background-color: 
  rgb( 
  146, 
  200, 
  247); 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "container" 
  > 
 
  < 
  div 
  class= 
  "col" 
  > 
 
  < 
  img 
  src= 
  "trend.png" 
  > 
 
  < 
  h1 
  >Trend 
  </ 
  h1 
  > 
 
  < 
  p 
  >The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry. 
  </ 
  p 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "col" 
  > 
 
  < 
  img 
  src= 
  "user.png" 
  > 
 
  < 
  h1 
  >User 
  </ 
  h1 
  > 
 
  < 
  p 
  >User namespaces are now fully implemented as of document is obsolete. 
  </ 
  p 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "col" 
  > 
 
  < 
  img 
  src= 
  "picture.png" 
  > 
 
  < 
  h1 
  >Picture 
  </ 
  h1 
  > 
 
  < 
  p 
  >Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes.. 
  </ 
  p 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >