<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
我尝试使用 clearfix 方法清除 float ，但它不起作用
我使用 clearfix 方法。我向 li 元素声明了 float。所以我将类(组)添加到 ul(因为它是 li 的父元素)但它不起作用？为什么？谁能告诉我应该在哪里使用该类(class)？ 注意:我使用占位符作为图像将时间上传。 这是codepen链接: https://codepen.io/Razu381/pen/qwKqXg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
<section class="section-menu">
<div class="row">
<h2>Our Special Items</h2>
</div>
<div class="mels-showcase">
<ul class="meal-photo ">
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
</ul>
<ul class="meal-photo ">
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
</ul>
<ul class="meal-photo">
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
</ul>
</div>
<a href="#" class="button">Recommend</a>
</section>
</body>
</html>
/*---clearfix--*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/*---section-menu---*/
.meal-photo li{
width: 25%;
float: left;
overflow: hidden;
height: 200px;
}
.meal-photo li img{
width: 100%;
display:block;
overflow: hidden;
}
.button {
background: #76B3FA;
border-radius: 100px;
padding: 20px 60px;
color: #fff;
text-decoration: none;
font-size: 1.45em;
margin: 0 15px;
}
最佳答案
为什么使用 floats当你有 flex拯救这一天？
.mels-showcase {
margin-bottom: 2em;
}
.meal-photo {
display: flex;
flex-wrap: wrap;
}
.meal-photo li {
width: 25%;
overflow: hidden;
}
.meal-photo li img {
width: 100%;
display: block;
overflow: hidden;
}
.button {
background: #76B3FA;
border-radius: 100px;
padding: 20px 60px;
color: #fff;
text-decoration: none;
font-size: 1.45em;
margin: 0 15px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
<section class="section-menu">
<div class="row">
<h2>Our Special Items</h2>
</div>
<div class="mels-showcase">
<ul class="meal-photo ">
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
<li><img src="https://via.placeholder.com/150"></li>
<li><img src="https://via.placeholder.com/150" alt=""></li>
</ul>
</div>
<a href="#" class="button">Recommend</a>
</section>
</body>
</html>解释:
而不是使用 <ul class="meal-photo ">为了表示每行 4 个元素，我确保有单亲 ul所有li作为 child 。
父 ul 被赋予一个 display的 flex
.meal-photo {
display: flex;
flex-wrap: wrap;
}
通过为每个 li 设置 25% 的宽度, 我们保证每行只出现 4 个
.meal-photo li {
width: 25%;
overflow: hidden;
}
最后我们为 mels-showcase 提供了 margin 底部为按钮提供一些喘息的空间
.mels-showcase {
margin-bottom: 2em;
}
关于html - 关于 float 和清除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55776225/