关于两个DIV之间的空白字符
首先！！！！这个问题应该是去面试前端会经常问到的问题！！！
如，下面这个例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
margin: 0 auto;
}
.container > div {
display: inline-block;
}
.left {
width: 80%;
height: 100%;
background-color: red;
}
.right {
width: 20%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。
效果如下图所示：
想要解决这种现象有两个办法：
- 将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦）
<div class="container">
<div class="left"></div><div class="right"></div>
</div> - 给父容器.container 加上 font-size:0:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
margin: 0 auto;
font-size: 0;
}
.container > div {
display: inline-block;
}
.left {
width: 80%;
height: 100%;
background-color: red;
}
.right {
width: 20%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果最终显示：
关于两个DIV之间的空白字符的更多相关文章
- 两个div之间有空隙
加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...
- HTML5 的拖放（实例：两个div之间拖放图片）
重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...
- 并排的两个div之间会有空隙
两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...
- 两个div之间的蜜汁间隙
两个div左右相邻,想让他们紧挨在一起 加了margin:0:padding:0: 不知道为什么还是会有间隙. 然后在两个div的父元素加了:font-size:0: 就终于挨在一起惹.
- 请问两个div之间的上下距离怎么设置
转自:https://zhidao.baidu.com/question/344630087.html 楼上说的是一种方法,yanzilisan183 <div style="marg ...
- 设置两个div是总是不能重合,浏览器user agent stylesheet问题
如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...
- 让上下两个DIV块之间有一定距离或没有距离
1.若想上下DIV块之间距离,只需设定:在CSS里设置DIV标签各属性参数为0div{margin:0;border:0;padding:0;}这里就设置了DIV标签CSS属性相当于初始化了DIV标签 ...
- JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- DOM的小练习，两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
随机推荐
- 2019CCPC 秦皇岛 E.Escape
传送门 题意: 给出一个\(n*m\)的迷宫,有\(a\)个入口,\(b\)个出口. 现在有\(a\)个机器人都从入口出发,一开始方向默认为下,你可以选在在一些格子上面放置一个转向器,转向器有四种: ...
- LeetCode 204. Count Primes计数质数 (C++)
题目: Count the number of prime numbers less than a non-negative number, n. Example: Input: 10 Output: ...
- MySql5.7InnoDB全文索引（针对中文搜索）
1.ngram and MeCab full-text parser plugins 全文检索在MySQL里面很早就支持了,只不过一直以来只支持英文.缘由是他从来都使用空格来作为分词的分隔符,而对于中 ...
- openlayers在底图上添加静态icon
越学习openlayer你会发现openlayer是真的很强大,今天记录一下学习的成果,需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息,以及点击弹出对应人员的一些位置 ...
- SQL Server 创建数据库
创建数据库有两种方式: 方式1-图形化界面创建: 1. 鼠标右击“数据库”,然后点击新建数据库 2.设置常规选项卡 2.1 给数据库命名,一般多个单词要用下划线连接,不建议用空格,如Test_DB. ...
- Linux性能优化实战学习笔记：第五十七讲
一.上节回顾 上一节,我带你一起梳理了常见的性能优化思路,先简单回顾一下.我们可以从系统和应用程序两个角度,来进行性能优化. 从系统的角度来说,主要是对 CPU.内存.网络.磁盘 I/O 以及内核软件 ...
- Chrome操作技巧
好用的插件: 如果你用 Chrome 浏览器,这8款插件一定要用! - 知乎 沙拉查词: 集合各大翻译,详细好用权威 Simple Allow Copy: 开启被网页屏蔽的自由复制功能 Qui ...
- MySQL学习笔记2————基础篇记录
这里以实验楼的数据库来记录,如有侵犯实验楼权益,请联系本人,必定删除 在此感谢实验楼提供的免费教程 MySQL 基础课程_SQL - 实验楼 一. 表project employee 任务:想要知道名 ...
- Python3 使用企业微信 API 发送消息
#coding=utf- import requests import json Secret = "TUbfeW8nFQakwOS4czm13SCnxSUPOqY2K0XHtM8XLT34 ...
- python开发--信息处理系统
#!/usr/bin/python card_list=[] #定义列表变量 def show_menu(): print("*" * 10) print("名片管理系统 ...