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>
  • 相关阅读:
    Python连接MySQL数据库之pymysql模块使用
    前端基础之BOM和DOM
    前端基础之JavaScript
    前端基础之CSS
    前端知识之HTML内容
    Python基础—名称空间(Day10)
    Python基础—装饰器(Day11)
    Python基础—迭代器、生成器(Day13)
    Python基础—文件操作(Day8)
    Python基础—函数(Day9)
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6519273.html
Copyright © 2011-2022 走看看