【HTML+CSS】右侧固定,左侧自适应布局
<style>
*{
padding: 0;
margin: 0;
} #left{
float: right;
width: 100%;
height: 300px;
} #box{
margin-right:220px;
background-color: pink;
height: 300px;
}
#right{
float: right;
margin-right: -100%;
width: 200px;
height: 300px;
background-color: yellow;
}
</style>
<div>
<div id="left">
<div id="box"></div>
</div> <div id="right" ></div>
</div>
【HTML+CSS】右侧固定,左侧自适应布局的更多相关文章
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- CSS负边距自适应布局三例
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- css实现九宫格图片自适应布局
我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...
- css实现三栏自适应布局(两边固定,中间自适应)以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
随机推荐
- ”MySQL查询优化“学习总结
查询优化有几种方法,下面分别介绍. 切分查询 一条大的语句(涉及很多行)一次会锁住很多数据(不利于高并发). 占满整个事务日志,耗尽系统资源.阻塞很多小的但很重要的查询. 分解关联查询 关联查询分解方 ...
- 20145104张家明 《Java程序设计》第8周学习总结
20145104张家明 <Java程序设计>第8周学习总结 教材学习内容总结 第15章 -java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件,就可以在标准 ...
- 20145336张子扬《网络对抗》MSF基础应用
20145336张子扬 <网络对抗>MSF基础应用 实验一:主动攻击,利用ms08_067漏洞进行攻击 首先使用use exploit/windows/smb/ ms08_067 _net ...
- Android实验一(在Android Studio中创建项目和模拟器)
北京电子科技学院(BESTI) 实 验 报 告 课程:移动平台开发 班级:1592 姓名:苏泽楠 学号:20159207 成绩: 指导教师 ...
- cogs 1962. [HAOI2015]树上染色
★★☆ 输入文件:haoi2015_t1.in 输出文件:haoi2015_t1.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 有一棵点数为N的树,树边有边 ...
- Linux环境下一些有用但不常见的命令
Linux环境下一些有用但不常见的命令 1.获取显卡硬件信息 lspci -vnn | grep VGA -A 12 (若是n卡,则用glxinfo) 2.执行*.sh文件 常见的执行*.sh文件当属 ...
- 第七章 对称加密算法--DES
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 7.1.对称加密算法 特点: 加密与解密使用同一个密钥 是使用最广的算法 常见对称加密 ...
- 帮助大家理解java中的随机和继承,动态绑定.
package com.ykmimi.javabianchengsixiang; /** * 形状的继承 随机形状生成器 * @author ukyor */ import java.util.Ran ...
- Unity3D学习笔记(五):坐标系、向量、3D数学
Unity复习 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ...
- 【深度学习】Pytorch学习基础
目录 pytorch学习 numpy & Torch Variable 激励函数 回归 区分类型 快速搭建法 模型的保存与提取 批训练 加速神经网络训练 Optimizer优化器 CNN MN ...