css实现简单的页面自适应宽度
1、css样式
.lgn{
width:500px;
height:20px;
}
.item_left_yd{
float: left;
display: inline-block;
width:240px ;
height: 100%;
}
.item_con li img{
width: 100%;
height: 140px;
}
.item_right_yd{
margin-left: 254px;
height: 100%;
background-color: #666666;
vertical-align: top;
}
2、html
<div class="lgn">
<div class="item_left_yd">
<img src="http://b-ssl.duitang.com/uploads/blog/201412/20/20141220101913_2XLSV.jpeg">
</div>
<div class="item_right_yd">
qwe
</div>
</div>
css实现简单的页面自适应宽度的更多相关文章
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html页面自适应宽度
html页面实现响应式的方式有很多,本篇介绍懒人必备一招见效的方法. 在head标签中加入 <meta name="viewport" content="width ...
- 纯Css实现Div高度根据自适应宽度(百分比)调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
- 简单jQuery图片自适应宽度插件jQuery.imgAutoSize.js
(function ($) { var loadImg = function (url, fn) { var img = new Image(); img. ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
随机推荐
- System V启动脚本启动的服务
/etc/rc.d/init.d/目录下的内容如下:这些常用的服务器都是System v的服务,要控制System V 的服务,我们可以使用以下命令 #/etc/rc.d/init.d/script ...
- POJ4852 Ants
Ants Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 20047 Accepted: 8330 Description ...
- 【P3056】【USACO12NOV】笨牛Clumsy Cows
P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...
- 转:解决Onethink上传视频的问题 超棒的解决方案
用过Onethink的都知道,它是不能上传视频的. 有人想到用上传附件的方式上传视频,但是结果……就是提示没有上传文件. 要是正常上传个一两兆的图片啊,压缩文件什么的还是可以的. 所以,重点来了 怎么 ...
- JavaScript基本的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LintCode_175 翻转二叉树
题目 翻转一棵二叉树 您在真实的面试中是否遇到过这个题? Yes 样例 1 1 / \ / \ 2 3 => 3 2 / \ 4 4 和前序遍历代码很相似从叶子节点依次翻转递归到根节点C++代码 ...
- python csv文件打开错误:_csv.Error: line contains NULL byte
当python读取文件出现_csv.Error: line contains NULL byte时, # -*- coding:utf-8 -*- import csv with open(r'E:\ ...
- 【机器学习PAI实战】—— 玩转人工智能之商品价格预测
摘要: 我们经常思考机器学习,深度学习,以至于人工智能给我们带来什么?在数据相对充足,足够真实的情况下,好的学习模型可以发现事件本身的内在规则,内在联系.我们去除冗余的信息,可以通过最少的特征构建最简 ...
- Python的bisect模块
Python的列表(list)类型内部是一个线性表,在线性表中查找元素复杂度为O(N),即调用list.index()的复杂的是O(N).当数据量较大时,应该使用二分查找优化,二分查找范围每次缩小一般 ...
- Python发送邮件1(带附件的)
普通的发邮件(不使用类)