頁面佈局

時間  2019-11-21
標籤 頁面 佈局 简体版
原文   原文鏈接

居中佈局

水平居中

  1. text-align:center
<style> .container { text-align: center; } .children { display: inline-block; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. margin: 0 auto
<style> .children { width: 100px; margin: 0 auto; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. flex
<style> .container { display: flex; justify-content: center; } .children { width: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. absolute+transform
<style> .children { position: absolute; left: 50%; transform: translate(-50%, 0); width: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼

垂直居中

  1. line-height
<style> .container { height: 500px; line-height: 500px; background: green; } .children { display: inline; height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. flex
<style> .container { display: flex; align-items: center; height: 500px; background:green; } .children { height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. absolute+transform
<style> .container { position: relative; height: 500px; background:green; } .children { position: absolute; top: 50%; transform: translate(0, -50%); height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. table cell
<style> .container { display: table-cell; vertical-align: middle; height: 500px; background:green; } .children { height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. margin
<style> .container { position: relative; height: 500px; background:green; } .children { position: absolute; top:0; bottom: 0; margin: auto 0; height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼

水平垂直居中

  1. absolute+transform
<style> .container { position: relative; width: 100%; height: 500px; background:green; } .children { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. flex
<style> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 500px; background:green; } .children { width: 100px; height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. margin
<style> .container { position: relative; width: 100%; height: 500px; background:green; } .children { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: blue; } </style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼
  1. table-cell
<style>
  .container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100vw;
    height: 500px;
    background:green;
  }
  .children {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>
複製代碼

多列布局

一列定寬，一列自適應

  1. float+margin
<style> .left { float: left; width: 100px; background:green; } .right { margin-left: 100px; background: blue; } </style>
<body>
  <div class="left">
    left
  </div>
  <div class="right">right</div>
</body>
複製代碼
  1. float+overflow
<style>
  .left {
    float: left;
    width: 100px;
    background:green;
  }
  .right {
    overflow: hidden;
    background: blue;
  }
</style>
<body>
  <div class="left">
    left
  </div>
  <div class="right">right</div>
</body>
複製代碼
  1. table
<style> .parent { display: table; width: 100%; } .left { display: table-cell; width: 100px; background:green; } .right { display: table-cell; background: blue; } </style>
<body>
  <div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. flex
<style>
  .parent {
    display: flex;
    width: 100%;
  }
  .left {
    width: 100px;
    background:green;
  }
  .right {
    flex: 1;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼

多列定寬，一列自適應

  1. float+overflow
<style> .parent { width: 100%; } .left-one, .left-two { float: left; width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { overflow: hidden; background: blue; } </style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. table
<style> .parent { display: table; width: 100%; } .left-one, .left-two { display: table-cell; width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { display: table-cell; background: blue; } </style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. flex
<style> .parent { display: flex; width: 100%; } .left-one, .left-two { width: 100px; } .left-one { background: green; } .left-two { background: yellow; } .right { flex: 1; background: blue; } </style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼

三欄(左右欄固定寬度中間自適應)

  1. 絕對定位
<style> .container div { position: absolute; min-height: 200px; } .left { left: 0; width: 300px; background: yellow; } .center { left: 300px; right: 300px; background: gray; } .right { right: 0; width: 300px; background: green; } </style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. float
<style> .container div { min-height: 200px; } .left { float: left; width: 300px; background: yellow; } .center { background: gray; } .right { float: right; width: 300px; background: green; } </style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
    
    <!--<div class="left">left</div>-->
    <!--<div class="center">center</div>-->
    <!--<div class="right">right</div>-->
    
  </div>
</body>
複製代碼
  1. flex
<style> .container { display: flex; min-height: 200px; } .left { width: 300px; background: yellow; } .center { flex: 1; background: gray; } .right { width: 300px; background: green; } </style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. 表格佈局
<style> .container { width:100%; display: table; min-height: 200px; } .container div { display: table-cell; } .left { width: 300px; background: yellow; } .center { background: gray; } .right { width: 300px; background: green; } </style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼
  1. 網格佈局
<style> .container { width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 300px auto 300px; } .left { background: yellow; } .center { background: gray; } .right { background: green; } </style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
複製代碼

等分

  1. float
<style> .parent { width: 100%; } .one, .two, .three, .four{ float: left; width: 25%; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>
複製代碼
  1. table
<style> .parent { display: table; width: 100%; } .one, .two, .three, .four{ width: 25%; display: table-cell; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>
複製代碼
  1. flex
<style> .parent { display: flex; width: 100%; } .one, .two, .three, .four{ flex: 1; } .one { background: green; } .two { background: yellow; } .three { background: blue; } .four { background: red; } </style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>
複製代碼

聖盃佈局

<style> .header { background: green; height: 50px; } .wrapper { height: 200px; display: flex; } .wrapper .left { width: 100px; background: yellow; } .wrapper .main { flex: 1; background: blue; } .wrapper .right { width: 100px; background: red; } .footer { height: 50px; background: gray; } </style>
<body>
  <div class="container">
    <div class="header">header</div>
    <div class="wrapper">
      <div class="left">left</div>
      <div class="main">main</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程