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>

 

相关文章
|
小程序
小程序右上角的胶囊颜色怎么修改?
小程序右上角的胶囊颜色怎么修改?
347 0
|
SQL 监控 NoSQL
乐观锁在分布式系统中如何实现
乐观锁在分布式系统中如何实现
|
存储 前端开发 JavaScript
|
监控 Java 数据库
如何在Java中实现分布式事务处理
如何在Java中实现分布式事务处理
|
存储 JSON API
淘宝订单接口对接实战(续):高级功能与实战案例
在上一篇文章中,我们详细介绍了如何对接淘宝订单接口的基础知识,包括API申请、环境准备以及基础的API调用。本文将在此基础上,进一步探讨淘宝订单接口的高级功能,并通过实战案例,演示如何在实际业务场景中应用这些功能,全文约5000字。
|
网络安全 数据安全/隐私保护
解决git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Pleas
解决git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Pleas
2846 0
|
JavaScript API
给 element-plus 增加一个防抖的功能(一)
element-plus 功能非常强大,但是好像只有 el-autocomplete 提供了一个防抖功能,其他表单子控件并没有提供防抖功能,而 el-autocomplete 的防抖和我想要的效果又不太一样,所以只好写个函数实现我想要的防抖效果。
|
前端开发 JavaScript C++
深入探索WebAssembly在前端性能优化中的应用
随着Web应用的功能越来越复杂,传统的JavaScript解释执行模式已经逐渐成为性能瓶颈。本文将介绍WebAssembly(以下简称Wasm)的基本概念、优势以及如何在现代Web开发中利用Wasm提升前端性能。我们将通过实际案例分析Wasm在处理高性能计算任务时相比JavaScript的优势,并探讨如何将Wasm集成到现有的前端项目中,以实现无缝的性能优化。本文旨在为前端开发者提供一个全面的Wasm应用指南,帮助他们充分利用这一新技术,提升Web应用的响应速度和用户体验。
442 0
|
Shell 网络安全
生成ssh公钥(ssh-keygen)
生成ssh公钥(ssh-keygen)
|
前端开发 JavaScript
vue或react中修改组件样式的方法
vue或react中修改组件样式的方法
1068 0