zoukankan      html  css  js  c++  java
  • 左右布局,左边定宽,右边自适应。

      左右布局,左边固定宽度,右边自适应。

      自己整理的几种方法:

      页面布局如下:

      

      方法1: 左边定位,右边添加marge-left

      .div1{  300px; height: 600px; background: black; position: absolute;

      .div2{height: 600px; min- 100px; background: red; margin-left: 300px} 

      方法2: 左边定为,右边定位(设置left)

      .div1{  300px; height: 600px; background: black; position: absolute;} 

      .div2{height: 600px; min- 100px; background: red; position: absolute; left: 300px; } 

      方法3:左边浮动 右边浮动(右边width设置为calc(100% - 300px); 必须有空格)

      .div1{  300px; height: 600px; background: black; float: left; } 

      .div2{height: 600px;  calc(100% - 300px); background: red; float: left; } 

      方法4: 左边浮动 右边设置overflow:auto

      .div1{  300px; height: 600px; background: black; float: left; } 

      .div2{ height: 600px; min- 200px; background: red; overflow: auto; } 

      方法5: 左边浮动 右边添加 marge-left

      .div1{  300px; height: 600px; background: black; float: left; } 

      .div2{ height: 600px; min- 200px; background: red; marge-left:300px; } 

      效果图:

      

      

  • 相关阅读:
    爬取校花网的视频
    实现爬取图片
    MongoDB简介和安装
    WebSocket实现简易聊天室
    WEB service基础
    Flask之CBV,flash,Flask-Session,WTForms,DBUtils
    Flask之session,路由,配置,蓝图, before/after_request
    Flask之request,response,Jinja2
    Linux下的docker
    Linux下docker配置镜像加速后重启docker服务失败
  • 原文地址:https://www.cnblogs.com/Sabo-dudu/p/7162247.html
Copyright © 2011-2022 走看看