css 中的画廊视图

Question

I'm trying to build a gallery view for images.我正在尝试为图像构建画廊视图。

gallery{
  position: relative;
  display: block;
  width: 100%;
  height: fit-content;
  overflow-x: hidden;
  background-color: red;
  padding: 18px;
}
gallery img{
  position: relative;
  display: inline-block;
  width: calc(33% - 25px);
  margin: 0px 4px;
  background-color: blue;
  padding: 4px;
}

The code above results in the following result: enter image description here上面的代码产生以下结果：在此处输入图像描述

How can I make it so the result would look somewhat like this ( enter image description here )?我怎样才能使结果看起来像这样（在此处输入图像描述）？

Answer 1

You can do this:你可以这样做：

gallery{
  position: relative;
  display: block;
  width: 100%;
  height: fit-content;
  overflow-x: hidden;
  background-color: red;
  padding: 18px;
  transform: rotate(180deg);
}
gallery img{
  position: relative;
  display: inline-block;
  width: calc(33% - 25px);
  margin: 0px 4px;
  background-color: blue;
  padding: 4px;
  transform: rotate(180deg);
}

Answer 2

I think you might be better off doing a simple grid system.我认为你最好做一个简单的网格系统。 grid-template-areas for example.例如网格模板区域。 Then you can lay out your gallery and just hide the elements you don't want.然后您可以布置您的画廊并隐藏您不想要的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Grid Span</title>
  <style>
    .grid {
      display: grid;
      width: 100%;
      height: 250px;
      grid-template-areas:
        'div-1 div-2 div-4'
        'div-1 div-2 div-4'
        'div-1 div-2 div-4'
        'div-1 div-3 div-5';
      grid-gap: 1rem;
    }
    div {
        padding: 3rem;
        background: #f4f4f4;
        border: #ccc 1px solid;
        text-align: center;
        font-weight: bold;
        font-size: 1.4rem;
  }
  .div-1 { grid-area: div-1; }
  .div-2 { grid-area: div-2; }
  .div-3 { grid-area: div-3; }
  .div-4 { grid-area: div-4; }
  .div-5 { grid-area: div-5; }
</style>
</head>
<body>
  <div class="grid">
    <div class="item-1 div-1">Item 1</div>
    <div class="item-2 div-2">Item 2</div>
    <div class="item-3 div-3">Item 3</div>
    <div class="item-4 div-4">Item 4</div>
    <div class="item-5 div-5">Item 5</div>
  </div>
</body>
</html>

Answer 3

<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

This would preserve image size.  [W3C Schools Gallery Grid][1]


  [1]: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

css 中的画廊视图

问题描述

3 个解决方案

解决方案1
0 2020-07-24 19:37:51

解决方案2
0 2020-07-24 20:19:59

解决方案3
0 2020-07-24 20:35:54

css 中的画廊视图

问题描述

3 个解决方案

解决方案1 0 2020-07-24 19:37:51

解决方案2 0 2020-07-24 20:19:59

解决方案3 0 2020-07-24 20:35:54

解决方案1
0 2020-07-24 19:37:51

解决方案2
0 2020-07-24 20:19:59

解决方案3
0 2020-07-24 20:35:54