DIV左、右布局
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左、右布局的更多相关文章
- DIV左、中、右三列布局的各类情况说明
一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...
- 典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- div向右偏移设置 css让div靠右移一定距离
转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- 使用 RSA 非对称加密保证数据不被篡改 java 例子代码
原理: 对原始数据 生成有序的json 字符串,然后取 摘要,然后 对摘要 进项 分对称加密.( 不对原数据加密是应为 原数据太大,加解密速度太慢,非对称加密都不 挺慢的.在摘要函数具有雪崩效应 ,原 ...
- 获取docker容器的ip地址
1.进入容器后执行cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSettings. ...
- 微信小程序学习之for循环
一.使用自定义创建的json数据 1. 创建微信小程序项目后 在wxml文件中增加for循环 <block wx:for="{{posts_key}}" wx:for-ite ...
- xml.sax 笔记
from xml.sax import saxutils html_str = """<!DOCTYPE html> <html> <hea ...
- PHP中的插件机制原理和实例
PHP项目中很多用到插件的地方,更尤其是基础程序写成之后很多功能由第三方完善开发的时候,更能用到插件机制,现在说一下插件的实现.特点是无论你是否激活,都不影响主程序的运行,即使是删除也不会影响. 从一 ...
- SSH实现隧道功能穿墙
Putty和SSH tunnel 目前寻求FQ的方式无非就几种: 寻找web代理(这个可以进我放置的在线代理进行测试) 自行寻找http/sock5代理(这个可以去网上搜索代理ip) vpnFQ(目前 ...
- GDI+ 库
uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winapi.GDIPUTIL}; procedure TForm1.FormPaint(Sender: TObject); ...
- 【剑指offer】输出链表倒数第K个元素
/* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; } }*/ ...
- Ubuntu 14.10 下连接SuperVessel Cloud
第一次创建实例后,系统会分配一个VPN用户,用于连接到系统. 官方帮助文档给出了使用方法 Linux VPN 客户端的配置方法 . 安装 VPNC: $ apt-get install vpnc $ ...
- uoj#29. 【IOI2014】Holiday
http://uoj.ac/problem/29 经过的点集一定是一个包含start的区间,为了经过这个区间内所有点,必须先到达一个区间端点,再到达另一个区间端点,剩余的步数则贪心选区间内最大价值的点 ...