div高度自适应(父元素未知,所有高度跟随子元素最大的高度)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.wrapper{
    width:100%;
    overflow:hidden;   //关键
    position:relative;

    background:blue;border:1px solid #333;}

.box{
    width:250px;
    padding-bottom:520px; margin-bottom:-500px;   //关键
    float:left;

    background:red;border:1px solid #333; display:inline;
}
</style>
</head>
<body>

<div class="wrapper">
  <div class="box"><br/><br/><br/><br/><br/></div>
  <div class="box">Lia,日本女歌手,现居东京。作品风格包括各种Anime Song在内的多种流派,从J-pop,R&B,Jazz到Soul,Lia均能发挥出色。
Lia在15岁赴美深造,大学毕业后的一段时期洛杉矶活动。
2001年开始演艺活动,拥有治愈系的歌声,其歌唱力亦极受肯定,并参加I‘ve,曾演唱多首著名游戏动画的主题曲。
同时还是2011年新开发的、隶属VOCALOID3的软件“IA”的声源提供者。</div>

  <div class="box">2004年9月开始在各地举行演唱会;11月初开设歌迷俱乐部。 2006年1月将举行演唱会。</div>
</div>
</body>
</html>
时间: 2024-10-12 12:41:10

div高度自适应(父元素未知,所有高度跟随子元素最大的高度)的相关文章

CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小

用法跟Android的android:layout_weight属性类似,可类比Android中的用法,这样比较好记,由于目前所有浏览器都不支持大部分的属性,所以所有的属性都需要加上Firefox.Safari.Opera 以及 Chrome支持替代的-moz-和-webkit-前缀,现在基本上所有的CSS3属性都应该这样做,即每个属性都需要至少设置三个,参考下面的例子. 父容器属性: display:box;当定义了这个属性时,子元素想居中显示时margin:0px auto是无效的,需使用t

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各 种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装好布局的模板和控件,归根结底,还是那几个布局控件: Grid,StackPanel,Canvas,Pivot..... 所以,分歧就来了,对于追求视觉上冲击和美观的程序员来说,虽说要秉承微软的大块布局,内容为先的策略,但是 依旧不喜欢微软的那些既定的模板,所以解决方案就有两个. 一:创建项目时依旧用那些

C# XML 给一个元素添加带有内容的子元素 给一个元素添加带有内容的子元素

1 代码 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Xml.Linq; 7 8 namespace ConsoleApplication8 9 { 10 class Program 11 { 12 static void Main(string[] args)

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

清除浮动,浮动元素的高度自适应问题

一.问题 当有时不浮动的父元素装载着浮动的子元素时,这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大.比如截图的第一行图,上面一条黑色的粗线,就是父div的边框(为了看效果,我设置了父div的border:5px.左右两边是各浮动一个div). 于是乎,我想解决这个父元素高度不会跟随着子元素的内容而变化的问题.谷歌了一下,找到答案 二.解决方法 参考来源:http://www.ruanyifeng.com/blog/2009/04/float_clearing.html 里面提到了

父容器内子容器浮动的高度自适应问题 _ CSS_HTML

‍1.当‍父容器不设置固定高度.宽度时,且子元素设置了浮动.让父容器随子容器的撑开而撑开,缩小而缩小,自动适应高宽度. 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK.zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[i

IE6不支持min-height如何解决高度自适应问题

IE6不支持min-height如何解决高度自适应问题:建议:尽可能的手写代码,可以有效的提高学习效率和深度.IE6问题多多,给大家带来了诸多烦恼,这里介绍一下因为IE6浏览器不支持min-height属性,从而导致了高度无法自适应的问题.在其他标准浏览器中,我们可以使用min-height属性给容器规定一个最小高度,如果内容超过这个最小高度,容器会自动被撑开以达到高度自适应效果,但是IE6浏览器并不支持这个属性,不过IE6本身就有高度自适应的特点,或许大家会认为只要同时使用height和min

uitableviewcell高度自适应笔记

今天看了几篇uitableviewcell高度自适应的文章,大体分为两种方式. 第一种方式,cell里面有label,在cellforrow绘制的时候计算Label的可能高度,并且在此时重新计算cell的高度,然后在heightforrow的时候返回这个cell新的高度.也就是说这些cell全部是计算出来的,根据里面的label的高度(label为contentView).http://blog.csdn.net/swingpyzf/article/details/18093959 第二种方式是

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l