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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- ORACLE 12C 之集群日志位置变化
如果你还是使用 oracle 11g RAC 的目录结构方式寻找集群的日志,你会发现目录中所有的日志都是空的.actdb21:/oracle/app/12.2.0/grid/log/actdb21(+ ...
- RSA 加密算法 Java 公钥加密私钥解密 和 私钥加密公钥解密 的特点
package com.smt.cipher.unsymmetry; import org.apache.commons.codec.binary.Base64; import org.apache. ...
- hanlp在Python环境中的安装失败后的解决方法
Hanlp是由一系列模型与算法组成的javag工具包,目标是普及自然语言处理再生环境中的应用.有很多人在安装hanlp的时候会遇到安装失败的情况,下面就是某大神的分享的在python环境中安装失败的解 ...
- HanLP代码与词典分离方案与流程
之前在spark环境中一直用的是portable版本,词条数量不是很够,且有心想把jieba,swcs词典加进来, 其他像ik,ansi-seg等分词词典由于没有词性并没有加进来. 本次修改主要是采用 ...
- imp导入备份时报:无法转换为环境字符集句柄
imp导入备份时报:无法转换为环境字符集句柄 ... 在imp 还原数据库的时候出现问题如下: 这个问题是 你用 expdp导出的 却用客户端的 imp 导入:换成impdp导入即可. 当用impdp ...
- XE5 Android 开发数据访问server端[转]
建立一个webservices stand-alone vcl application 作为手机访问的服务端 1.new->other->webservices 2.选择 stand-a ...
- centos绑定多个域名
正在使用aliyun主机,运行centos6.4 64位系统,安装lamp环境后进行域名绑定.配置文件如下: <VirtualHost *:80> DocumentRoot /var/ww ...
- ThinkPHP 3.1.2 查询方式 -4
一.普通查询方式 a.字符串 $arr=$m->where("sex=0 and username='gege'")->find(); b.数组 $data['sex' ...
- pytest.3.Assert
From: http://www.testclass.net/pytest/assert/ Assert就是断言,每个测试用例都需要断言. 与unittest不同,pytest使用的是python自带 ...
- 【springboot】之Application配置
# =================================================================== # COMMON SPRING BOOT PROPERTIE ...