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

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<!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>

 

相关文章
|
5月前
|
前端开发
css元素实现垂直竖直万能居中
css元素实现垂直竖直万能居中
32 0
|
4月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
28 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
6月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
前端开发
css:grid布局子元素被撑开导致没有按比例均分
css:grid布局子元素被撑开导致没有按比例均分
378 0
css:grid布局子元素被撑开导致没有按比例均分
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层。
121 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
195 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(3,此节不全)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
93 0
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(4)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法
143 0
|
前端开发 JavaScript
<jQury动态布局>浮动子元素均分布局
在前端页面的布局过程中,作者遇到了,这样一个问题 当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时的资料,没有符合要求的布局示例, 今天自己用jQuery实现了动态计算子元素的margin,实现了子元素的均分布局,特来分享一下.
959 0