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 ...
随机推荐
- vue里调用moment.js
1.首先安装moment npm install moment --save 2.在main.js里引入 import moment from 'moment'//导入文件 Vue.prot ...
- 基于 DataLakeAnalytics 的数据湖实践
随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析.这样的好 ...
- ML面试1000题系列(81-90)
本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 81.已知一组数据的协方差矩阵P,下面关于主分量 ...
- C#中Object转化为json对象
比如定义一个类: public class Lines { public string X1 { get; set; } public string X2 { get; set; } public s ...
- optim.py cs231n
n如果有错误,欢迎指出,不胜感激 import numpy as np """ This file implements various first-order upda ...
- web服务器与tomcat
web服务器与tomcat 服务器分类: 硬件服务器和软件服务器 web服务器: 提供资源供别人访问 web: 网页的意思,资源. web资源分类: 动态的web资源:内容有可能发生改变的 静态的we ...
- Python 使用正则表达式抽取数据
- golang的包导入import
import别名/点下划线(1)import关键字的作用:作用是导入该go源文件所依赖的package包.用在go源文件中,紧接在pakage后面的部分.(2)只要在源文件中用到了的package包就 ...
- qt获取本机用户名
//获取用户名 QString getUserName() { #if 1 QStringList envVariables; envVariables << "USERNAME ...
- golang数据类型二
字符类型 3.14基本数据类型的相互转换 3.15基本数据类型和string的转换 FormatInt // FormatUint 将 int 型整数 i 转换为字符串形式// base:进位制(2 ...