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. 门诊叫号系统系列-1.语音叫号 .net c#

    最近收到一个需求,朋友诊室需要做到门诊叫号,流程如下:病人选择医生-刷身份证排队-医生点击病人姓名叫号. 经过团队的努力,一个简易的门诊叫号系统已经完成.现在把各个功能记录下来,方便以后查看. 1.语 ...

  2. 洛谷P1978 集合 [2017年6月计划 数论08]

    P1978 集合 题目描述 集合是数学中的一个概念,用通俗的话来讲就是:一大堆数在一起就构成了集合.集合有如 下的特性: •无序性:任一个集合中,每个元素的地位都是相同的,元素之间是无序的. •互异性 ...

  3. 说说a标签的onclick和href

    在平时我们一般会在列表中的最后一列给加上操作功能,一般的操作功能是修改和删除,这个操作我们可以通过a标签来实现其功能. <a class="pn-opt" href=&quo ...

  4. WCF 服务

    1.代码 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Seriali ...

  5. 构建PaaS的开源平台:CloudFoundry

    CloudFoundry的架构: 点评:这是vmware用ruby开发的一个paas,由于对ruby不太熟悉,还是比较难理解. refer to :http://www.oschina.net/que ...

  6. POJ 1150 The Last Non-zero Digit 数论+容斥

    POJ 1150 The Last Non-zero Digit 数论+容斥 题目地址: id=1150" rel="nofollow" style="colo ...

  7. 基于mcp940反编译Minecraft源代码

    引言 Minecraft中文叫"我的世界",没怎么深入玩过,来试试把它源代码反编译出来吧. 参考教程: https://minecraft.gamepedia.com/Mods/C ...

  8. vue的table组件

    一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...

  9. Docker数据管理-数据卷 data volumes和数据卷容器data volumes containers的使用详解

    此文来源于:https://yq.aliyun.com/ziliao/43471 参考原文件之外,做了些修改. Volume数据卷是Docker的一个重要概念.数据卷是可供一个或多个容器使用的特殊目录 ...

  10. 洛谷1014 Cantor表

      水题.随便搞搞就过了. //Serene #include<algorithm> #include<iostream> #include<cstring> #i ...