时间戳

首页 > 解决方案 > CSS html图像不堆叠

html - CSS html图像不堆叠

问题描述

我正在学习 Udemy 的 CSS 课程，名为“使用 HTML5 和 CSS3 构建响应式真实世界网站”

图像应该堆叠在一起，如下所示：

image1   image2   image3  image 4.

但他们正在堆积起来，就像这样：

image1
image2
image3
image4

代码被准确地逐字复制。

我输入错误了吗？

为了尝试隔离问题，我将非功能代码提取到一个单独的文件中。我也尝试添加

figure {
        display: block;
        float: left;
    }

但这也没有用。但是，这不是讲师给出的代码的一部分。

我希望看到讲师给出的代码能够正常工作，因为理想情况下，我希望继续遵循他给出的相同代码来继续本书，所以我希望可能存在语法问题或其他问题，但我只是可以'想不通....

这是我提取的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.meals-showcase {
  list-style: none;
  width: 100%;
}

.meals-showcase li {
  display: block;
  float: left;
  width: 25%;
}

.meal-photo {
  width: 100%;
  margin: 0;
}

.meal-photo img {
  width: 100%;
  height: auto;
}
<section class="section-meals">

  <ul class="meals-showcase">
    <li>
      <figure class="meal-photo">
        <img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">

      </figure>
      <figure class="meal-photo">

        <img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">

      </figure>
      <figure class="meal-photo">
        <img src="resources/img/3.jpg" alt="Indian Hamachaji with">

      </figure>
      <figure class="meal-photo">
        <img src="resources/img/4.jpg" alt="Korean goolash with egg">
      </figure>
    </li>
  </ul>
</section>

标签： htmlcssimage

解决方案

尝试figure标签内的每个标签li我认为你在尝试什么：

<section class="section-meals">

        <ul class="meals-showcase">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">

                </figure>
            </li>

            <li>
                <figure class="meal-photo">

                    <img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">

                </figure>
            </li>                  

            <li>
                <figure class="meal-photo">
                    <img src="resources/img/3.jpg" alt="Indian Hamachaji with">

                </figure>
            </li>

            <li>
                <figure class="meal-photo">
                    <img src="resources/img/4.jpg" alt="Korean goolash with egg">                                       
                </figure>
            </li>
        </ul>




    </section>

推荐阅读