设置HTML适应不同分辨率的屏幕。

需求结构如下：

HTML结构代码如下（只是其中一条）：

<body>

<div class="content"><!--用于包裹一条内容-->

        <div class="img"><img src="../img/03.png"></div><!--放置内容图片-->

        <div class="text"><!--放置内容文字-->

            <div class="title">聊聊天</div>

            <div class="detail">龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！</div>

        </div>

    </div><span style="font-family: Arial, Helvetica, sans-serif;"></div></span><span style="font-family: Arial, Helvetica, sans-serif;"></body></span>
/* css 样式之一*/

<pre name="code" class="css">@media screen and (min-width:1080px){

            .box{ width: 1080px;}.content{width: 1040px;min-height: 190px;}

                                 .img{height:180px;}

                                 .text{min-height: 180px;}

                                 .img{font-size: 48px;line-height: 180px;}

            .title{font-size: 46px;line-height: 100px;}

             .detail{font-size: 20px;}

        }




我对class=content里面的子元素进行了float，所以两个div在一行，其它样式代码不再贴出，查看页面，效果却不是我想要的，如下：




第一个content的内容，覆盖到了第二个content上。原因是我设置了父元素class=text,的高度，在class=detail的div中写入内容超过了复原的高度，所以溢出了，想要父元素自适应包含元素高度，只需要取消父元素text的高度。如下：


<pre name="code" class="css">@media screen and (min-width:1080px){

            .box{ width: 1080px;}.content{width: 1040px;}

                                 .img{height:180px;}

                                 .img{font-size: 48px;line-height: 180px;}

            .title{font-size: 46px;line-height: 100px;}

             .detail{font-size: 20px;}

        }









我取消了两层content和text两层父元素的高度，内容是包裹了，但是样式飞了。如下：




因为我取消了content元素的高度，因为里面的子元素img和text是浮动的，浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。content没有高度包裹不了浮动的子元素，所以所有的子元素，浮动到了一起。如下图：


图片来自：http://www.jbxue.com/css/31451.html


上图中，第二容器，在容器中添加了一行，如下，我在结构代码中，添加了一行：


<span style="font-size:12px;"><div class="content"><!--用于包裹一条内容-->

        <div class="img"><img src="../img/03.png"></div><!--放置内容图片-->

        <div class="text"><!--放置内容文字-->

            <div class="title">聊聊天</div>

            <div class="detail">龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！</div>

        </div>

        <span style="background-color: rgb(255, 0, 0);"><div class="clear" style="clear:poth;"></div><!-- 加入不浮动元素 --></span>

    </div></span>


在每个content结束之后，清除content这个元素中子元素的浮动，清除之后。因为div.clear是区块且没有浮动，会一直在父元素中，所以会撑起父元素，效果如下：






版权声明：本文为博主原创文章，未经博主允许不得转载。
												


											
关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。的更多相关文章
	

    
						
  1. 子元素浮动父容器高度不能自适应的CSS解决方法
		
    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...
    
		
    2. 
								
  2. {03--CSS布局设置}  盒模型 二 padding    bode   margin 标准文档流   块级元素和行内元素  浮动  margin的用法  文本属性和字体属性  超链接导航栏    background  定位   z-index
		
    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
    
		
    3. 
						
  3. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
		
    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器  ...
    
		
    4. 
						
  4. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
		
    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
    
		
    5. 
						
  5. 【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？
		
    正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...
    
		
    6. 
						
  6. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）
		
    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
    
		
    7. 
						
  7. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
		
    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
    
		
    8. 
						
  8. <转载>如何解决子级用float浮动父级div高度不能自适应的问题
		
    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
    
		
    9. 
						
  9. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
		
    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. bzoj2120: 数颜色（BIT套主席树+set/分块）
			
    带修改的 HH的项链. 带修改考虑用BIT套主席树,查区间里有几个不同的数用a[i]上次出现的位置pre[i]<l的数有几个来算就好了. 考虑怎么修改.修改i的时候,我们需要改变i同颜色的后继的 ...
    
			
    2. 
						
  2. bzoj1706: [Usaco2007 Nov]relays 奶牛接力跑 (Floyd+新姿势)
			
    题目大意:有t(t<=100)条无向边连接两点,求s到e刚好经过n(n<=10^7)条路径的最小距离. 第一反应分层图,但是一看n就懵逼了,不会写.看了题解之后才知道可以这么玩... 首先 ...
    
			
    3. 
						
  3. 【BZOJ 4555】[Tjoi2016&Heoi2016]求和 多项式求逆/NTT+第二类斯特林数
			
    出处0.0用到第二类斯特林数的性质,做法好像很多,我打的是直接ntt,由第二类斯特林数的容斥公式可以推出,我们可以对于每一个i,来一次ntt求出他与所有j组成的第二类斯特林数的值,这个时候我们是O(n ...
    
			
    4. 
						
  4. 2115: [Wc2011] Xor （线性基+dfs）
			
    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 5714  Solved: 2420 题目链接:https://w ...
    
			
    5. 
						
  5. Human life FZU - 2295 最大权闭合子图（第一次遇到被教育了）
			
    Xzz is playing a MMORPG "human life". In this game, there are N different skills. Some ski ...
    
			
    6. 
						
  6. 组合框控件 -- CComboBox
			
    组合框控件 -- CComboBox 组合框其实就是把一个编辑框和一个列表框组合到了一起,分为三种:简易(Simple)组合框.下拉式(Dropdown)组合框和下拉列表式(Drop List)组合框 ...
    
			
    7. 
						
  7. zabbix监控ipmi
			
    @1.假设idrac已经启用,并且使用ipmitool能正确读取数据(本文后面详细描述如何配置) @2.第一节只涉及web配置 1.创建主机 configuration-->hosts--> ...
    
			
    8. 
						
  8. Mac 访问隐藏文件方法！ 网上方法在我电脑上都不可用！
			
    百度的方法: 如果你想打开整个系统的隐藏文件可以在终端下输入以下命令 defaults write com.apple.finder AppleShowAllFiles -bool true 关闭显示 ...
    
			
    9. 
						
  9. 单线程的redis为什么达到每秒万级的处理速度？
			
    纯内存访问,redis将所有数据都放在内存中,内存响应时间大约为100纳秒,这是redis达到每秒万级级别访问的重要基础. 非阻塞IO,redis使用epoll作为IO多路复用技术的实现,再加上red ...
    
			
    10. 
						
  10. js script type 部分属性值分析
			
    1. text/javascript: (1)<script type="text/javascript" src="Js/jquery-1.10.2.min.js ...
    
			
    11.