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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- How to Export to Excel
https://simpleisbetterthancomplex.com/tutorial/2016/07/29/how-to-export-to-excel.html Export data to ...
- Linux常用文本操作命令整理
阅读目录 1.统计命令——wc 2.切分命令——cut 3.排序命令——sort 4.去重命令——uniq 5.查找命令——grep 6.替换/查找/删除命令——sed 7.强大的文本分析命令——aw ...
- vim使用技巧大全
1.vim清空内容 光标移到第一行,然后在非插入模式按10000后然后点dd .要嫌笨的话就在非插入模式下输入:.,$d 一回车就全没了 2.vim光标跳转操作 1.跳到文本的最后一行:按“G”,即“ ...
- 亿级用户百TB级数据的AIOps 技术实践之路
关于面临的挑战 "因为专业性强,我认为反而让交互方式变简单了,打个点餐的比方,软件1.0阶段是,我要吃鱼香肉丝,我要吃辣的或是素一点的,根据清晰的接口上菜.而软件2.0阶段就是,我今天想吃开 ...
- 【MatConvNet代码解析】 一些理解
1.DagNN对象的executionOrder属性 该属性是hidden属性,所以外部是访问不到的.只有dagnn.DagNN类和dagnn.Layer类可以访问到. 该属性的设置是在DagNN类的 ...
- C# 装箱
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- C++ Builder使用VC DLL
好久没用BCB了,真的有些陌生了,当然个烂笔头吧. 1 先 implib c:\xxx.lib c:\xxx.dll 生成lib文件 2 #pragma comment(lib,"xxx.l ...
- Vivado约束文件（XDC）的探究(2)
Vivado约束文件(XDC)的探究(2)
- Mysql 复制工作原理
数据库配置的时候,一定要开启二进制日志,如果开始没开启后来再想开启的话,必须重启. 基于日志点的复制 备份数据库工具 ----------------------------------------- ...
- JAVA开源B2C系统
前言 最近有人想面向境外销售商品,但是又不想依托于亚马逊这些平台,于是找我来帮忙想弄个B2C系统.因为刚开始只是打算试试水,也就不打算投入多少成本了.所以这边就考虑使用开源的B2C系统来直接使用了. ...