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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- spring cloud 各子项目作用
spring cloud 各子项目作用: table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 150px; ...
- ElasticSearch（六）底层索引控制
相似度算法 涉及到了ES的底层,首先讲一下ES的底层核心,相似度模型,ES的查询和传统的数据库查询最大的差别就在相似度查询(之前讲过,索引存储的最大差别就是讲非结构化数据转化为结构化),ES里面会给文 ...
- Linux平台下停止后台进程脚本编写
1.场景说明 [root@master ~]# jps -m 33050 Jps -m 3299 NameNode 3747 ResourceManager 9028 ConsoleConsumer ...
- mybatis源码阅读心得
第一天阅读源码及创建时序图.(第一次用prosson画时序图,挺丑..) 1. 调用 SqlSessionFactoryBuilder 对象的 build(inputStream) 方法: 2. ...
- RC4被JDK8默认禁用导致腾讯QQ邮箱无法访问
7月29日开始,腾讯修改了邮箱的加密方式,导致我们线上的所有的腾讯代收.代发邮件的功能全部失效.解决方法在最后,如果需要可直接跳转至解决方法一节 问题出现 7月29日开始,线上的所有的腾讯代收.代发邮 ...
- 正则匹配获取HTML图片地址，正则匹配获取HTML内容
//正则匹配获取HTML图片地址preg_match_all('/<img.*?src="(.*?)".*?>/is', $str, $array); if (isse ...
- Consul+upsync+Nginx实现动态负载均衡 摘自https://blog.csdn.net/qq_29247945/article/details/80787014
传统感念:每次修改完nginx配置文件,要重启nginx 动态感念:每次修改完nginx配置信息,不需要重启,nginx实时读取配置信息. Nginx: 反向代理和负载均衡 Consul:是用go编写 ...
- js switch 函数类型 序列化 转义
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } 函数 func ...
- VI常用命令及linux下软件
一.一般模式:删除.复制与粘贴类命令 x,X x为向后删除一个字符,X为先前删除一个字符 nx(n代表数字) 向后删除n个字符 dd 删除当前行 D 删除当前行所有字符,试成为空行 ndd(n代表数字 ...
- 有了Jenkins，为什么还需要一个独立的部署系统
需不需要一个独立的部署系统是很多企业用户在构建持续交付流程中经常困惑的一个问题.也经常有用户会问我们,现在已经有Jenkins,它自身提供了丰富的部署插件(如WebSphere部署插件.Tomcat部 ...