<!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 type="text/css">
*{margin: 0;padding: 0;}
body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}
.main {overflow: hidden;width: 800px;margin: 0 auto;}
.left {float: left;width: 250px;overflow: hidden;}
.center {float:left;margin-left:5px;width:295px;}
.right {float: right;width: 245px;overflow: hidden;}
.bor_top {height:1px;background:#FB9D51;overflow:hidden;}
.equal {padding-bottom: 32767px;margin-bottom: -32767px;}
.box {background: #F5E2AF;border: 1px #FB9D51 solid;padding-left:10px;padding-right:10px;}
.mt5 {margin-top: 5px;}</style>
</head>
<body>
<div class="main">
<div class="left equal">
<div class="box"><p>阅谁问君诵，水落清香浮</p></div>
<div class="box mt5"><p>阅谁问君诵，水落清香浮</p></div>
<div class="box mt5"><p>阅谁问君诵，水落清香浮</p></div>
<div class="equal mt5 box">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
</div>
<div class="center equal">
<div class="box"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
<div class="box mt5"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
<div class="box mt5"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
<div class="equal mt5 box">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
</div>
<div class="equal right">
<div class="box">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<div class="box mt5">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<div class="box mt5">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<div class="equal mt5 box">
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
</div>
</div>
</body>
</html>
主要样式
overflow: hidden; padding-bottom: 32767px; margin-bottom: -32767px;
效果图：
相关推荐
在父容器上设置`display: flex`和`flex-wrap: wrap`，然后对子元素设置`flex: 1`，就能让同一行内的所有子元素自动等高。这种方法适用于静态和动态内容，且具有很好的响应式设计支持。 4. **Grid布局**：CSS Grid是...
这种布局方式的主要目标是让一组图片在一行内排列，无论屏幕大小如何，每张图片的高度都能自动调整到与同行其他图片相等，从而呈现出整齐一致的视觉体验。 "腾讯砖墙布局"是一种实现等高响应式布局的典型方法，它由...
总的来说，"脚本控制DIV三行三列布局自适应高度"是一个实用的技术实践，帮助开发者实现动态内容的等高布局，以提升网页的用户体验。在实际开发中，需要结合具体项目需求和浏览器支持情况，选择最适合的实现方式。
### 脚本控制三行三列自适应高度DIV布局详解 #### 一、概述 在Web开发过程中，实现多列等高布局是一项常见的需求，尤其是在处理动态内容时。传统的CSS布局方法（如使用背景图、外包层或者通过右栏覆盖左栏的方式）...
例如，对于小屏幕设备，可能希望每行只显示一列，而对于大屏幕，可能显示三列。 ```css /* 对于小屏幕 */ @media (max-width: 600px) { .item { width: 100%; } } /* 对于大屏幕 */ @media (min-width: 600px) ...
打开这个文件，你可以看到HTML结构、CSS样式以及可能的JavaScript代码，它们共同协作实现了三列的高度自适应和等高效果。通过学习和理解这个demo，开发者可以掌握创建响应式三列布局的关键技巧，并应用于自己的项目...
3. **脚本控制DIV三行三列布局自适应高度**： 这是一种响应式的布局技术，确保在不同尺寸的屏幕上，元素能够保持良好的视觉效果。开发者可能会使用CSS Flexbox或Grid布局，或者通过JavaScript动态计算各元素的高度...
在本课程中，我们将深入探讨SheCodes的第三周第5课——“响应式设计”，以“Croissant”为主题。响应式网页设计是现代Web开发的关键技术，它允许网站在不同设备上，如桌面电脑、平板电脑和手机，提供优化的用户体验...
- **曲面与等高线**：`surf`和`contour`函数分别用于绘制3D曲面和等高线图。 5. **数据可视化高级技巧** - **颜色映射**：`colormap`函数可以改变图像的颜色映射，如`colormap('jet')`设置为彩虹色。 - **透明度...
接下来，Flexbox模型引入了11个新的CSS属性，这些属性分为三类：用于设置flex容器的属性、用于设置flex项目（flex items）的属性，以及用于处理对齐和分配空间的属性。以下是一些关键的Flexbox属性： - flex-...
Flexbox允许使用负的`margin`值来调整元素间距，Bootstrap 4利用这一点，引入了`.mr-auto`和`.ml-auto`类，使得元素自动填充剩余空间，而无需使用额外的列或行。 5. **Order属性** Flexbox的`order`属性使得我们...