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>
  • 相关阅读:
    因为付出,所以喜欢。开发就是这么坑!
    停滞在一个圈子,决定人生的高低![深度文章]
    我不曾忘记的初心-程序员如何看待买房子
    能力要进化-还在技术停滞不前吃老本吗?
    能力要进化-还在技术停滞不前吃老本吗?
    我不曾忘记初心-我们最终都成了自己讨厌的人
    我不曾忘记初心-我们最终都成了自己讨厌的人
    我不曾忘记的初心-冒险努力正是你缺少的!
    我不曾忘记的初心-冒险努力正是你缺少的!
    JS之正则表达式
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6519273.html
Copyright © 2011-2022 走看看