zoukankan      html  css  js  c++  java
  • 三列浮动中间列宽度自适应

    今天犯了个很低级的错误。。特此记入历史。。。。。。

    本来需要做一个背景图平铺呢。像这样子的

    因为需要在移动端的网页,所以就不能直接切背景图来用,所以切了左边一块,后边一块,中间切了一个小竖条,打算平铺。说来说去的重点就是,需要左右定位上去,中间自适应。。。。

    结果我今天果然是脑袋不太好使的节奏,做来做去竟然都是这种情况:

    可以看出错误吗。平铺过多了,右边本来该露出来的空白都木有露出来呢!

    思来想去,各种定位浮动各种使用,把自己都搞的有点儿焦头烂额了,瞬间恍然大悟啊,我竟然给中间的div设置的100%的宽度啊!伤不起啊!!!

    现在把最基础的代码贴出来供自己谨记!!!!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三列左右固定宽度中间自适应——AA25.CN</title>
    <style>
    body{
    margin:0px;
    }
    #left {
    background-color: #E8F5FE;
    border: 1px solid #A9C9E2;
    height: 400px;
    200px;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    #center {
    background-color: #F2FDDB;
    border: 1px solid #A5CF3D;
    height: 400px;
    margin-right: 202px;
    margin-left: 202px;
    }
    #right {
    background-color: #FFE7F4;
    border: 1px solid #F9B3D5;
    height: 400px;
    200px;
    position: absolute;
    top: 0px;
    right: 0px;
    }
    </style>
    </head>

    <body>
    <div id="left">左列</div>
    <div id="center">中列——AA25.CN</div>
    <div id="right">右列</div>
    </body>
    </html>

    。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。华丽的分割线。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

    下面再记录一个基础的问题

    让一个父级宽高不固定的元素始终居中,首先,父级是position:relative;然后给目标元素position:absolute;

    接下来是重点啊!

    给目标元素设置一下的样式:

    left:50%;

    margin-left:负的元素本身宽度的一半;

    top:50%;

    margin-top:负的元素本身高度的一半;

    这样子不管你的窗口肿么变化,不管你的父级怎么改变大小,你都不怕被它甩出去,始终占据中间的位置啦!哈哈!!

  • 相关阅读:
    523 vue组件化高级 插槽slot:slot基本使用,具名插槽,编译作用域,作用域插槽
    522 vue父子组件的访问方式: $children、$refs、$parent
    521 vue子组件向父组件传递数据
    520 vue父组件向子组件传递:props基本用法,props数据验证,props中的驼峰标识
    在 React 组件中使用 Refs 指南
    Flutter 代码开发规范
    Angular ZoneJS 原理
    vue中$refs, $emit, $on, $once, $off的使用
    详解Js加法运算符
    JavaScript 异常
  • 原文地址:https://www.cnblogs.com/hr2014/p/4226726.html
Copyright © 2011-2022 走看看