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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- mysql之 redo log
重做日志(redo log) 前言:之前一直弄不清楚 mysql 里面 bin log 和 innodb log 文件的区别,在脑子里面一直有个疑问 binlog 日志文件已经可以用来进行数据库的日志 ...
- 逻辑回归（logic regression）的分类梯度下降
首先明白一个概念,什么是逻辑回归:所谓回归就是拟合,说明x是连续的:逻辑呢?就是True和False,也就是二分类:逻辑回归即使就是指对于二分类数据的拟合(划分). 那么什么是模型呢?模型其实就是函数 ...
- MVC4.0，并完美结合Razor引擎
本文主要解决“当前上下文不存在ViewBag”的问题, 在View视图实际使用过程中,如果引用不正确会提示“当前上下文不存在ViewBag”,首先需要引入“Microsoft.CSharp”类库 然后 ...
- Spring Cloud(Dalston.SR5)--Hystrix 断路器-合并请求
在 Spring Cloud 中可以使用注解的方式来支持 Hystrix 的合并请求,缓存与合并请求功能需要先初始化请求上下文才能实现,因此,必须实现 javax.servlet.Filter 用于创 ...
- position 分层固定在屏幕某位置
很多网站我们看到在屏幕右下角有一个,返回顶部,始终在那儿,还有些网站顶部菜单栏永远也是固定的不动,就是通过今天学习的position来做的. 在style中加入 positon:fixed;top 0 ...
- Redis几种数据类型的应用场景（转）
原文地址:https://blog.csdn.net/xiaoliuliu2050/article/details/73250708
- ubuntu-docker入门到放弃（六）数据管理
在docker的数据管理中,有两个概念: 1.数据卷 数据卷是一个可供容器使用的特殊目录,它绕过文件系统,可以提供很多有用的特性: 1.1 数据卷可以在容器之间共享和重用 1.2 对数据卷的修改会立刻 ...
- 【巷子】---flux---【react】
一.什么是Flux Flux 是一种架构思想,专门解决软件的结构问题.它跟MVC 架构是同一类东西,但是更加简单和清晰. 二.flux的基本概念 (1) .Flux由4部分组成 1.View:视图层 ...
- git 强行pull并覆盖本地文件
git 强行pull并覆盖本地文件 git fetch --all git reset --hard origin/master git pull
- centos 7 服务管理
启动一个服务:systemctl start firewalld.service关闭一个服务:systemctl stop firewalld.service重启一个服务:systemctl rest ...