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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- Docker容器挂载主机目录访问出现Permission denied的解决办法
Docker挂载主机目录,访问相应的文件出现Premission denied的权限访问问题 挂载后,查看相应的文件出现如下的提示: [root@ba471da26d07 soft]# lsls: c ...
- DP-动态规划算法实例：拿糖果问题
拿糖果问题 问题描述 妈妈给小B买了N块糖!但是她不允许小B直接吃掉. 假设当前有M块糖,小B每次可以拿P块糖,其中P是M的一个不大于根号下M的质因数.这时,妈妈就会在小B拿了P块糖以后再从糖堆里拿走 ...
- py-day1-2 python的循环语句
死循环: 条件循环: 练习 第一题: n = 1 while n < 11: if n == 7: pass else: print(n) n = n + 1 print('-----end-- ...
- 查看JVM运行时参数
1.查看JVM运行时参数 -XX:+PrintFlagsInitial -XX:PrintFlagsFinal -XX:+UnlockExperimentalVMOptions 解锁实验参数 -XX: ...
- Spring Schedule实现定时任务
applicationContext.xml 1. 增加配置 <!-- 开启定时任务 --> <task:annotation-driven /> <!-- 开启注解 - ...
- Hanlp在ubuntu中的使用方法介绍
HanLP的一个很大的好处是离线开源工具包,换而言之,它不仅提供免费的代码免费下载,而且将辛苦收集的词典也对外公开啦,此诚乃一大无私之举．我在安装的时候,主要参照这份博客: blog.csdn.net ...
- 排序算法<No.1> 【计数排序】
继上篇博文,今天我将先介绍一下什么是计数排序,将计数排序描述清楚后,再进行后续的桶排序方法解决这个问题. 通常情况下,一提到排序,大家第一反应就是比较,其实,今天我要说的这个计数排序,不是基于比较的排 ...
- 通过U盘启动vmware虚拟机
不能通过虚拟机的USB功能,而是通过硬盘映射功能实现,操作方法如下图. 1.添加硬盘,注意接口类型与启动系统的支持(XPPE不支持scsi,但10pe支持) 2.硬盘类型 3.选择U盘映射 4.按F2 ...
- mongodb 慕课网
------------------------------------------------mongodb简述------------------------------------------- ...
- How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch And Redis[转]
This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of ...