关于浮动和清除

问题描述 投票：0回答：1

我尝试使用clearfix方法清除浮动，但它不起作用

我使用clearfix method.i声明float到li elements.so我将类（group）添加到ul（因为它是li的父元素）但是它不起作用？为什么？谁能告诉我在哪里上课？注意：我使用占位符，因为图像会上传时间。这是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;
}
html css
1个回答
1
投票

当你有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作为孩子。

父母ul给予display的flex

.meal-photo {
  display: flex;
  flex-wrap: wrap;
}

通过为每个li设置25％的宽度，我们确保每行只出现4个

.meal-photo li {
  width: 25%;
  overflow: hidden;
}

最后，我们为mels-showcase提供了一个底部边缘，为按钮提供了一些喘息空间

.mels-showcase {
  margin-bottom: 2em;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.