1、右边宽度固定，左边自适应

　　第一种(flex布局，不兼容IE9以下浏览器)：

<style>

    body {

        display: flex;

    }

    .left {

        background-color: aqua;

        height: 200px;

        flex: 1;

    }

    .right {

        background-color: bisaue;

        height: 200px;

        width: 100px;

    }

</style>

<body>

    <div class="left"></div>

    <div class="right"></div>

</body>

　　第二种：

<style>

    div {

        height: 200px;

    }

    .left {

        float: right;

        background-color: aqua;

        width: 200px;

    }

    .right {

        background-color: bisaue;

        margin-right: 200px;

    }

</style>

<body>

    <div class="left"></div>

    <div class="right"></div>

</body>

2、左边定宽，右边自适应：

<style>

    .left {

        float: left;

        width: 200px;

        background-color: aqua;

        height: 200px;

    }

    .right {

        background-color: bisque;

        height: 200px;

    }

</style>

<body>

    <div class="left"></div>

    <div class="right"></div>

</body>

DIV左、右布局的更多相关文章

  1. DIV左、中、右三列布局的各类情况说明

    一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...

  2. 典型的DIV＋CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  3. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  4. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  5. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  6. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  7. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  8. div向右偏移设置 css让div靠右移一定距离

    转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...

  9. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  10. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

随机推荐

  1. php 内网/外网ip判断

    工作需要判断ip是否是内网ip,本来想着使用正则自己写一个呢,后来发现php自带的有现成的函数[filter_var()](http://php.net/manual/zh/function.filt ...

  2. Appium Desktop Inspector 安卓真机配置（Windows）

    本文是基于 Windows环境 通过Appium Desktop 测试真机,首先要确保测试机已经和电脑正确连接(将手机和电脑通过USB数据线连接,手机打开USB调试) 确认电脑与手机是否连接成功的方法 ...

  3. 阿里云学习笔记之Java Web环境搭建

    1. 下载JDK7 http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521 ...

  4. Github访问慢解决办法

    为什么慢?github的CDN被某墙屏了. 绕过dns解析,在本地直接绑定host.打开dns查询工具网站http://tool.chinaz.com/dns 查询域名github.global.ss ...

  5. 关于vivado----xdc文件时钟约束的初识

    关于vivado----xdc文件时钟约束的初识 1.Primary Clocks(主时钟) 然而,对于比较复杂的时钟: 2.某个模块采用的主时钟(比如说GT) 3.时钟分频 4.复杂一点的时钟描述 ...

  6. MySql 常见错误代码大全 VV2

    从机一直1593错误,排查了半天发现是从的配置文件中的server-id没改导致,此低级错误记录下警醒自己 B.1. 服务器错误代码和消息 服务器错误信息来自下述源文件: · 错误消息信息列在shar ...

  7. 单进程与 多进程关系及区别（多进程系统linux）

    单进程编程:顺序执行 数据同步 复杂度低 用途单一 多进程编程:同时执行 数据异步 复杂度高 用途广泛 1. 多进程的优势在于任务的独立性,比如某个任务单独作为一个进程的话,崩溃只影响自己的服务,其他 ...

  8. python调用tcpdump抓包过滤

    之前在linux用python脚本写一个抓包分析小工具,实在不想用什么libpcap.pypcap所以,简单来了个tcpdump加grep搞定.基本思路是分别起tcpdump和grep两个进程,进程直 ...

  9. java线程实现的四种方式

    java多线程的实现可以通过以下四种方式 1.继承Thread类,重写run方法 2.实现Runnable接口,重写run方法 3.通过Callable和FutureTask创建线程 4.通过线程池创 ...

  10. 【mysql】之性能优化

    http://blog.csdn.net/orichisonic/article/details/48026031 https://www.cnblogs.com/zhming26/p/6322353 ...