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>
  • 相关阅读:
    k8s 节点的 NodeAffinity 使用
    template 与 host , item trigger的关系
    mysql 性能优化思路
    nginx 配sorry page
    修改tomcat JVM 大小 jdk--目录修改
    (转)MySQL慢查询分析优化 + MySQL调优
    注册表操作 Microsoft.Win32.Registry与RegistryKey类
    C#(99):WCF之.NET Remoting通讯
    CallContext线程数据缓存-调用上下文
    C#(99):JSON与对象的序列化与反序列化
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6519273.html
Copyright © 2011-2022 走看看