zoukankan      html  css  js  c++  java
  • 两边定宽,中间自适应布局的四种实现方法

    1. 浮动法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两边定宽,中间自适应</title>
        <style type="text/css">
        html,body,div{
         height: 80%;
        border:3px solid black;
     } .left{  300px; float: left; background-color: red; } .right{  300px; float: right; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"></div> </body> </html>

    2. 定位法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两边定宽,中间自适应</title>
        <style type="text/css">
        html,body,div{
         height: 80%;
        border:3px solid black;
     } .parent{ position: relative; } .left{  300px; position: absolute; left: 0; background-color: red; } .right{  300px; position: absolute; right: 0; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> </html>

    3. 弹性盒子法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两边定宽,中间自适应</title>
        <style type="text/css">
        html,body,div{
        height: 80%;
        border:3px solid black;
     } .parent{ display: flex; } .left{  300px; background-color: red; } .right{  300px; background-color: yellow; } .center{ flex:1; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>

    4.calc计算法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两边定宽,中间自适应</title>
        <style type="text/css">
        html,body,div{
            height: 80%;
        border:3px solid black; } .left{ 300px; float: left; background-color: red; } .right{ 300px; float: right; background-color: yellow; } .center{ calc(100% - 620px); margin: 0 auto; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"></div> </body> </html>
  • 相关阅读:
    构造与析构的次序
    为什么析构函数常声明为虚函数
    偏移数组的二分查找
    字符串循环右移N位
    const 补充
    对类 sizeof
    指针与引用
    python小练习
    初学数据挖掘——相似性度量(一)
    每天进步一点点(二)
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6519273.html
Copyright © 2011-2022 走看看