div布局方案整理
实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，由此引申出本文的几种解决方案
1 左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 300px;
height: 300px;
padding: 0px;"> red;
}
.right {
padding: 0px;"> orange;
margin-left: 310px;
height: 300px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>实际效果：
2 左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 300px;
height: 300px;
padding: 0px;"> gray;
margin-right: -100%;
}
.right {
float: left;
width: 100%;
}
.right-content {
height: 300px;
margin-left: 310px;
padding: 0px;"> black;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="right-content"></div>
</div>
</body>
</html>实际效果：
3 如果将需求修改为右侧固定宽度而左侧自适应宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 100%;
height: 300px;
padding: 0px;"> blue;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
padding: 0px;"> yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>实际效果：
div布局方案整理的更多相关文章
- css常用左右布局方案整理
实际项目开发过程中我们经常会遇到页面div左右布局的需求:左侧 div 固定宽度,右侧 div 自适应宽度,填充满剩余页面,下面整理几种常用的方案 1 左侧 div 设置 float 属性为 le ...
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- 移动适配请使用比rem等更好的布局方案
移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配. 屏幕适配顾名思义 ...
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
- CSS3页面布局方案
CSS3页面布局方案 Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则 ...
- 小div布局之卡片堆叠（card-stacking）
前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...
- 淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
- 基于淘宝弹性布局方案lib-flexible的问题研究
上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...
- [MVC] DIV 布局
[MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...
随机推荐
- maven编译package慢
mvn package编译出现连接不上mvn库的问题: [root@localhost nnnnn]# mvn package[INFO] Scanning for projects...Downlo ...
- Collections.synchronizedList线程安全性陷阱
摘要: 详细的解析:Collections.synchronizedList 1 :关注要点,为什么在有synchroniezed方法的同时会出现 Collections.synchronizedLi ...
- 二十三、详述 IntelliJ IDEA 中恢复代码的方法「进阶篇」
咱们已经了解了如何将代码恢复至某一版本,但是通过Local History恢复代码有的时候并不方便,例如咱们将项目中的代码进行了多处修改,这时通过Local History恢复代码就显得很麻烦,因为它 ...
- STM32和STR71X移植uCos-II操作系统比较分析
STM32和STR71X移植uCos-II操作系统比较分析 ——ARM7 TDMI和ARMv7-M Cortex-M3 的异同 STM32F103ZE,大容量,ARMv7-M,Cortex-M3系列, ...
- flume data to hdfs
flume 开发梳理 flume 数据到hadoop conf/hdfsAgent.conf #配置sources.channels.sinks a1.sources=r1 a1.channels=c ...
- 如何理解低耦合AND高内聚?[转]
1.高内聚 首先我们来看看内聚的含义:软件含义上的内聚其实是从化学中的分子的内聚演变过来的,化学中的分子间的作用力,作用力强则表现为内聚程度高.在软件中内聚程度的高低,标识着软件设计的好坏. 我们在进 ...
- 一点一点看JDK源码（五）java.util.ArrayList 后篇之forEach
一点一点看JDK源码(五)java.util.ArrayList 后篇之forEach liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 代 ...
- iOS 类似美团或饿了么评价中的星星评分控件
1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图: image.p ...
- 如何优雅的使用C语言绘制一只小猪佩奇
今天我们来用C语言画一只小猪佩奇---社会.社会....在画小猪佩奇之前,我们先使用带符号的距离长 (signed distance field,SDF) 来画一个圆形. 使用这个方法表示形状,但是这 ...
- Zabbix——设置模板
前提条件: Zabbix版本为4.0 可以正常使用Server 1. 添加H3C网络交换机的CPU和内存模板,并配置自动发现. 注意,需要添加完成后,重新进行搜索后再此进入才有下列选项. 添加CPU的 ...