主页 / 问题 / 1103403
Accepted
Nimaj
Asked:2020-03-31 21:30:40 +0000 UTC2020-03-31 21:30:40 +0000 UTC

具有不同照片尺寸的 HTML + CSS 组合照片布局

  • 772

事情是这样的：我自己做了一个网站（免连作品集重新模板），有一个带照片的小作品集（有屏幕）在此处输入图像描述

因此，在这个作品集中，这些照片具有不同的高度，它们仍然“进入”其他照片之间的空白区域（如屏幕截图所示）。我试着用 flex 来做，grid 也试过......不，它没有用。有这样一个想法：让块（照片包含在单独的块中）调整到每张照片的高度，然后它们自己会“进入”照片之间的这些空白空间。但是如果可以让子元素采用父元素的样式，那么反之就不行了（

这是代码：HTML

<body>
<header>
    <div class="container">

    </div>
</header>
<section class="portfolio">
    <div class="container">
        <div class="port">
            <div class="img">
                <img src="img/image1.png" alt="">
            </div>
            <div class="img">
                <img src="img/image2.png" alt="">
            </div>
            <div class="img">
                <img src="img/image3.png" alt="">
            </div>
            <div class="img">
                <img src="img/image4.png" alt="">
            </div>
            <div class="img">
                <img src="img/image5.png" alt="">
            </div>
            <div class="img">
                <img src="img/image6.png" alt="">
            </div>
            <div class="img">
                <img src="img/image7.png" alt="">
            </div>
            <div class="img">
                <img src="img/image8.png" alt="">
            </div>
            <div class="img">
                <img src="img/image9.png" alt="">
            </div>
            <div class="img">
                <img src="img/image10.png" alt="">
            </div>
        </div>
    </div>
</section>

css

 .container{
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
}
header{
   background: grey;
   height:100vh;
}
.port{
   display: flex;
   flex-wrap: wrap;
   justify-content: s`введите сюда код`pace-between;
}
html

1 个回答

  1. Best Answer

    例如网格 css

    .parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 10px;
  height: 100vh;
}

.div1 {
  grid-area: 1 / 2 / 3 / 3;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
}

.div3 {
  grid-area: 1 / 4 / 3 / 5;
}

.div4 {
  grid-area: 2 / 3 / 4 / 4;
}

.div5 {
  grid-area: 3 / 2 / 5 / 3;
}

.div6 {
  grid-area: 4 / 3 / 6 / 4;
}

.div7 {
  grid-area: 6 / 3 / 8 / 4;
}

.div8 {
  grid-area: 5 / 2 / 7 / 3;
}

.div9 {
  grid-area: 3 / 4 / 5 / 5;
}

.div10 {
  grid-area: 5 / 4 / 7 / 5;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}
    <div class="parent">
  <div class="div1">
    <img src="http://placehold.it/100x200" alt="">
  </div>
  <div class="div2">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div3">
    <img src="http://placehold.it/100x200" alt="">
  </div>
  <div class="div4">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div5">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div6">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div7">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div8">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div9">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div10">
    <img src="http://placehold.it/200" alt="">
  </div>
</div>

    • 1

相关问题