CSS浮动高度不统一乱排,在线等?
发布网友
发布时间：2022-04-06 11:46
共6个回答
热心网友
时间：2022-04-06 13:16
目标效果：每一排都要顶部对齐
方法：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>
热心网友
时间：2022-04-06 14:34
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>
热心网友
时间：2022-04-06 16:08
另外: 你的float布局也可以，导致这个的原因就是因为你的li太高了，把中间那两个li挤到了最旁边
热心网友
时间：2022-04-06 18:00
2.在ul上给样式{
display:flex;
flex-wrap:wrap;
}
热心网友
时间：2022-04-06 20:08
热心网友
时间：2022-04-06 22:32
