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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- iuplua test failure
prepared SW Download from https://sourceforge.net/projects/iup zerobrane Step Write follwiing codes ...
- 用react编写一个hello world
我要分享的是用react搭建一个简单的hello world, 一个小demo, 大神请略过 首先看一下目录结构 创建一个目录, 用于存放demo mkdir reactHello cd reactH ...
- java 连接 hiveserver2 例子
启动了 hiveserver2 以后才能使用 程序连接 .目前的 使用的 是 server2 版本.和以前的版本驱动包名不同: package hadoop; import java.sql.Co ...
- 获取TypeError：__init __（）缺少1个需要的位置参数：'on_delete'当试图添加父表后面的子表
解决办法:https://stackoverflow.com/questions/44026548/getting-typeerror-init-missing-1-required-position ...
- python2核心类库：urllib、urllib2的区别和使用
urllib/urllib2都是接受URL请求的相关模块区别:1.urllib2可以接受一个Request类的实例来设置URL请求的headers,urllib仅可以接受URL.这意味着,你不可以伪装 ...
- ulimit设置内存限制是否有效
如何使用ulimit限制物理内存 限制物理内存 $ ulimit -m 512000 经测试,无效. 限制物理内存不起作用,ulimit不支持限制物理内存,可见man ulimit手册 -m The ...
- Hbase 简介+环境安装配置教程
HBase介绍 HBase是参考google的bigtable的一个开源产品,建立在hdfs之上的一个提供高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.是一种介于nosql和RDBMs之间的 ...
- nginx支持android、ios、微信扫一扫
首先做一个android下载的html页面,页面中识别微信浏览器提示在浏览器中打开,然后在nginx对ios进行识别并跳转到apple store #下载App location ^~ /appDow ...
- 禁止ajax访问shiro管理的登录页面
在使用shiro的时候,对于用户权限的管理,相信很多人都已经很熟悉了.今天,我这里简单的记录一下我自己调试过程中遇到的问题.主要是登录的操作,禁止通过ajax的方式进行访问. shiro中,登录过程拒 ...
- sqlserver触发器执行顺序【未经验证】
exec sp_settriggerorder @triggername = 'tr_customer_1', @order = 'first', @stmttype = 'insert',@name ...