主页 / 问题 / 942318
Accepted
Родион Поляков
Asked:2020-02-08 13:49:56 +0000 UTC2020-02-08 13:49:56 +0000 UTC

减少 div 的数量

  • 772

告诉我，在这个例子中可以不用<div class="more">...</div>吗？

img {
    max-width: 100%;
    height: auto;
}

.more {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    margin-top: 10px;
}
<div class="photo">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <div class="more">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
        <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    </div>
</div>

html

4 个回答

  1. 如果结果应该与您的代码段中的结果相同，那么可以，但是为此您需要进行一些更改。

    img {
    max-width: 100%;
    height: auto;
}

/* весь photo превращяется в grid */
.photo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

/* А первая картинка в блоке photo становится шириной от 1 ячейки сетки, до 4й */
.photo img:first-child {
    grid-column: 1 / span 4;
}
    <div class="photo">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
</div>

    • 3
  2. Best Answer

    应用伪类:first-child来设置第一张图片的样式。该属性grid-row表示取第一行（在第一行和第二行之间），grid-column将元素拉伸到容器的整个宽度（从第一行到最后一行）。

    img {
    max-width: 100%;
    height: auto;
}

.photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.photos :first-child {
    grid-row: 1 / 2;  /* занимает первую строчку */
    grid-column: 1 / -1;  /* и все доступные колонки */
}
    <div class="photos">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
    <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
</div>

    • 3

  3. 作为一种选择，使用 flexbox - 浏览器比网格更支持：

    .photo {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.photo img {
  margin-right: 10px;
  width: calc(25% - 10px);
}

.photo img:first-child {
  margin-bottom: 15px;
  width: 100%;
}

.photo img:last-child {
  margin-right: 0;
}
    <div class="photo">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
</div>

    • 2

  4. Kvilios 答案的改进版本：

    .photo {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.photo img {
  /* 7.5px = 10px * (n / n - 1), где n — кол-во фотографий в ряду, в данном случае 4 */
  width: calc(25% - 7.5px);
}

.photo img:first-child {
  margin-bottom: 10px;
  width: 100%;
}

.photo img:not(:first-child) + img {
  margin-left: 10px;
}
    <div class="photo">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
  <img src="https://4.bp.blogspot.com/-KRym5tq8hu8/VwzHCS14M_I/AAAAAAAABQI/rSpEJlsPOqM9AUhuPYRo5hA2bKzB3ZCNwCLcB/s1600/tekstura-dolki-apelsin.jpg">
</div>

    • 0

相关问题