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. 如何查看MySQL执行计划呢?

    覆盖索引: MySQL可以利用索引返回select列表中的字段,而不必根据索引再次读取数据文件 包含所有满足查询需要的数据的索引称为 覆盖索引(Covering Index) 如果要使用覆盖索引,一定 ...

  2. 安装mysql报错2503

    安装MySQL-5.5.27报这个错误: The installer has encountered an unexpected error installing this package.This ...

  3. cmd 运行 python

    ①cmd 进入行命令: ②输入 “python” + “空格”,即 ”python “:将已经写好的脚本文件拖拽到当前光标位置,然后敲回车运行即可.

  4. Codeforces 300C

    题目链接: http://codeforces.com/contest/300/problem/C 本来是道不难的题目,还是自己的数学功底不扎实. 从该题又一次巩固了关于乘法逆的概念,在剩余系中,如果 ...

  5. ASP.NET CORE使用MailKit的一个故障点分析

    ASP.NET CORE下有需要发邮件的需求,但是原来framework下的 system.net.mail,没有实现smtpclient的功能(当时看是没有,说是准备并入.net core来着),所 ...

  6. WPF 触发器例子

    WPF的触发器很强大,这里简单附上触发器的一个小例子,分别用XMAL和CS代码来实现一个功能,鼠标悬停在button上时改变字体颜色 1.XMAL代码如下: <Window x:Class=&q ...

  7. 第一周<单元一聚类>

    K-means 聚类算法 初始随机选择 而后不断更新 kmeans 应用 省份归类 调用kmeans方法所需要的参数 n_clusters 指定的聚类中心 init 初始聚类中心的初始化方法 默认k- ...

  8. POJ2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5067   Accepted: 2593 Des ...

  9. if (donutString.indexOf("dozen") != -1)是什么意思

    if (donutString.indexOf("dozen") != -1)是什么意思 function parseDonuts(donutString) { numDonuts ...

  10. CSS user-select文本是否可复制

    1. 概述 1.1 说明 在项目过程中,有时候需要网页中内容信息不可被复制进行保护数据信息,故可使用css属性user-select进行控制用户能否选中文本. 1.2 语法 user-select : ...