<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.d1{
background-color: red;
overflow: hidden;
/*ie比较低版本的浏览器中,加上 zoom:1;*/
zoom:1;
}
.d1_1{
background-color: red;
}
.left{
background-color: yellow;
width: 100px;
height: 50px;
float: left;
}
.right{
float: right;
width: 100px;
height: 80px;
background-color: green;
}
.d2{
background-color: black;
width: 100%;
height: 10px;
}

</style>
</head>
<body>
<div style="width:200px;height:20px;margin-top:0px;">问题重现：</div>
<div class="d1_1">
<div class="left"></div>
<div class="right">
</div>
</div>
<div class="d2"></div>
<div style="width:200px;height:20px;margin-top:100px;">问题解决：</div>
<div class="d1">
<div class="left"></div>
<div class="right">
</div>
</div>
<div class="d2"></div>

<div style="width:100px;height:100px;border:1px solid black;margin-top:10px;overflow:hidden">问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：</div>
<div style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100px;
border:1px solid black;
margin-top:10px;">
用法2：隐藏文字
</div>

<div style="margin-top:10px;">问题所在：div的高度比图片高出一点点</div>
<div style="background-color:red;overflow:hidden;">
<img src="6.png" alt="">
</div>
<div style="margin-top:10px;">问题解决1：设置div高宽与图片一样，添加：overflow:hidden</div>
<div style="background-color:red;overflow:hidden;height:150px;width:200px;margin-top:10px;">
<img src="6.png" alt="">
</div>
<div style="margin-top:10px;">问题解决2：图片添加样式：display:block</div>
<div style="background-color:red;margin-top:10px;">
<img src="6.png" style="display:block">
</div>
</body>
</html>

css:overflow属性妙用的更多相关文章

  1. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  2. 前端知识点--CSS overflow 属性

    问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...

  3. CSS overflow 属性

     值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...

  4. 了解CSS overflow属性 标签： htmlcss属性 2016-12-31 14:38 75人阅读 评论(1)

    overflow属性规定当内容溢出元素框时如何显示. 例:div { width:150px; height:150px; overflow:scroll; } 可能的值有: 值           ...

  5. CSS Overflow 属性清除浮动

    清除浮动 设置overflow的一个更流行的用处是,说也奇怪,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除自己(self-clear).意思就是,应用了overflow(auto或 ...

  6. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  7. 教你玩转CSS Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

  8. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  9. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

随机推荐

  1. 像黑客一样使用 Linux 命令行

    前言 之前在博客园看到一篇介绍 IntelliJ IDEA 配置的文章,它里面用的是 gif 动态图片进行展示,我觉得很不错.所以在我今天以及以后的博文中,我也会尽量使用 gif 动图进行展示.制作 ...

  2. 详解微信开发者文档——5 access_token管理

    写在前面的话:前几篇博客详细讲解了如何获取用户发送的消息并进行回复,这里的回复是一种被动的回复,而被动回复的方式便是通过echo返回信息给微信服务器的POST请求,因此,其实我们并没有算的上调用了微信 ...

  3. ABP框架 - 介绍

    文档目录 本节内容: 简介 一个快速示例 其它特性 启动模板 如何使用 简介 我们总是对不同的需求开发不同的应用.但至少在某些层面上,一次又一次地重复实现通用的和类似的功能.如:授权,验证,异常处理, ...

  4. java.lang.NoSuchMethodError: org.apache.tomcat.util.res.StringManager.getManager(Ljava/lang/Class;)Lorg/apache/tomcat/util/res/StringManager

    问题: 使用Springboot打包为war部署于Tomcat7中报错 java.lang.NoSuchMethodError: org.apache.tomcat.util.res.StringMa ...

  5. Hibernate 命名查询

    1.定义 Hibernate允许在映射配置文件中定义字符串形式的查询语句,这种查询方式被称为命名查询. 2.创建表结构并添加测试数据 create table `student` ( `id` dou ...

  6. ContentProvider域名替换小工具

    开发项目域名想怎么换就怎么换,就是这么任性! 这是一个很有意思的小工具! 这是一个方便开发人员和测试人员的小工具!! 吐槽: 一直在做Android开发,一直总有一个问题存在:做自己公司的apk开发时 ...

  7. 创建 Monitor 并测试 - 每天5分钟玩转 OpenStack（124）

    前面我们创建了 Pool,VIP 并添加了 Member.今天将创建 Monitor,然后测试 LBaaS 是否能够正常工作. 创建 Monitor LBaaS 可以创建 monitor,用于监控 P ...

  8. IOS 封装功能和逻辑思想

    在ios开发中,难免会用到helper的思想.这篇就简单讲解下关于helper的简单实用方法. 假设我们要做一个这样的界面: 会议分为四种情况: 未召开 正在召开 已结束 已取消 再看看逻辑关系: 编 ...

  9. 时间复杂度分别为 O（n）和 O（1）的删除单链表结点的方法

    有一个单链表,提供了头指针和一个结点指针,设计一个函数,在 O(1)时间内删除该结点指针指向的结点. 众所周知,链表无法随机存储,只能从头到尾去遍历整个链表,遇到目标节点之后删除之,这是最常规的思路和 ...

  10. ASP.NET Core 中文文档 第四章 MVC（2.1）模型绑定

    原文:Model Binding 作者:Rachel Appel 翻译:娄宇(Lyrics) 校对:许登洋(Seay).何镇汐 模型绑定介绍 ASP.NET Core MVC 中的模型绑定从 HTTP ...