CSS浮动高度不统一乱排，在线等？
目标效果：每一排都要顶部对齐
方法：1、块级元素行内显示：display: inline-block;
2、顶部对齐：vertical-align: text-top;
实现步骤：
1、建立基本元素标签，并设置颜色区分， 设置不同高度来模拟你所说的高度不一致的情况
代码：
效果图：
2、换行：使每个li变成行内块级元素，宽度超过ul宽度时会自动换行
代码：
效果图：
3、顶部对齐：其实第二步已经做到了，是默认的顶部对齐，但经测试有时候不会顶部对齐，如：将文字去掉
所以加上一句：vertical-align: text-top;更为保险了。
4、完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{ list-style:none; }
.myli {
width: 25px;
margin-top: 10px;
color: #ffffff;
vertical-align: text-top;
display: inline-block;
}
</style>
</head>
<body>
<ul style="width: 100px;margin: auto;border: #303030 1px solid;">
<li class="myli" style="height: 20px; background-color: #666;"></li>
<li class="myli" style="height: 40px; background-color: rgb(17, 233, 186);"></li>
<li class="myli" style="height: 28px; background-color: rgb(11, 87, 226);"></li>
<li class="myli" style="height: 60px; background-color: rgb(7, 194, 178);"></li>
<li class="myli" style="height: 10px; background-color: #303030;"></li>
<li class="myli" style="height: 20px; background-color: #bcbe23;"></li>
<li class="myli" style="height: 40px; background-color: #370d85;"></li>
<li class="myli" style="height: 20px; background-color: #303030;"></li>
</ul>
</body>
</html>
如果高度是内容撑开的，不给高度固定值，内容撑开多少算多少，你给了固定值如果我文字内容多出了你设定的高度值岂不是又要重新设置，还是你说的方法你有这样设置过嘛？
我这里的高度不就是模拟的撑开效果嘛，不信的话你把所有li设置height:auto然后自己在里面多加点文字试一下嘛，一样的吧
大雅新科技有限公司
2024-11-19 广告
css弹性布局
<!DOCTYPE html>
<html>
<head>
<title>css弹性布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
a{
text-decoration:none;/*a去下划线*/
border-bottom:1px dashed red;/*a虚线底边框*/
}
#outbox{
position:relative;/*a相对定位*/
width:70%;/*宽度*/
margin:0 auto;/*横向居中*/
display:flex;/*弹性容器*/
flex-wrap:wrap;/*自动换行*/
justify-content:flex-start;/*横向对齐方式从左向右*/
align-content:flex-start;/*多行纵向对齐方式，从上向下*/
align-items:flex-start;/*单行纵向对齐方式，从上向下*/
}
.mybox{
width:19.4%;/*宽度*/
margin-right:0.8%;/*右边距*/
margin-bottom:10px;/*底边距*/
}
#outbox div:nth-child(4n){/*选择第4n个子容器*/
margin-right:0px;/*右边距为0*/
}
.topbox{
width:100%;/*宽度相对于父容器100%*/
height:100px;/*高度*/
background:rgb(218,218,218);/*背景色*/
border-radius:7px;/*圆角*/
}
h2{
font-size:16px;/*文字高度*/
}
p{
font-size:14px;/*文字高度*/
}
</style>
</head>
<body>
<div id="outbox">
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的。</p>
<a href="###">learn more</a>
</div>
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定。</p>
<a href="###">learn more</a>
</div>
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定。文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定</p>
<a href="###">learn more</a>
</div>
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定。</p>
<a href="###">learn more</a>
</div>
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定。</p>
<a href="###">learn more</a>
</div>
<div>
<div>
</div>
<h2>一个文章标题</h2>
<p>文章的文字内容，这里的文字内容有的时候多，有的时候少，要看情况而定。</p>
<a href="###">learn more</a>
</div>
</div>
</body>
</html>
另外: 你的float布局也可以，导致这个的原因就是因为你的li太高了，把中间那两个li挤到了最旁边
2.在ul上给样式{
display:flex;
flex-wrap:wrap;
}
