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实现简单的页面自适应宽度的更多相关文章

  1. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html页面自适应宽度

    html页面实现响应式的方式有很多,本篇介绍懒人必备一招见效的方法. 在head标签中加入 <meta name="viewport" content="width ...

  3. 纯Css实现Div高度根据自适应宽度(百分比)调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

  4. 简单jQuery图片自适应宽度插件jQuery.imgAutoSize.js

    (function ($) {       var loadImg = function (url, fn) {         var img = new Image();         img. ...

  5. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  6. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  7. 老生长谈:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  8. 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

随机推荐

  1. LAMP标准化安装

    操作系统说明: 操作系统 版本 linux red hat release 6.4 关键软件包说明: 软件包 版本 目录 运行用户 httpd-2.2.27.tar.gz 2.2.27 /usr/lo ...

  2. Intellij IDEA 创建资源文件夹 source folder

    [转载]原文链接:https://blog.csdn.net/u014723529/article/details/78050725 之前用 eclipse 新建有一个 source folder , ...

  3. webpack--安装,使用

    1. webpack 1.1. webpack介绍 webpack是一个资源的打包工具,目前最新为webpack3,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一 ...

  4. xmlns详解(转载)

    我们经常会在网页中碰到形如<html xmlns=”http://www.w3.org/2001/xhtml”>这样的代码, 或在是android 编码中的main.xml中看到形如< ...

  5. JavaScript之HTML DOM Document 对象

    文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...

  6. CMake学习笔记五-依赖库添加

    # # 项目名称 # SET(WIS_PROJECT_NAME EXAMPLE) # dependencies SET(DEPENDENCIES #依赖第三方库 ) #Qt模块 SET(QT_MODU ...

  7. Spring_Aop基于配置文件

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. jquery 日期和时间的逻辑,比较大小

    HTML:<ul> <li> <span>到达</span> <img class="date-s" src="/p ...

  9. jdbc连接数据库的步骤(转载)

    http://hzy3774.iteye.com/blog/1689525   1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过jav ...

  10. python流程控制和循环

    变量的命名:可以由数字字母下换线组成 ,不能以数字开头,可以使用中文但是不推荐使用中文,不推荐前面使用_ __,不能使用系统的关键字,变量名严格区分大小写 逻辑运算优先级 or<and<n ...