时间戳

首页 > 解决方案 > 基本html和css帮助图片

html - 基本html和css帮助图片

问题描述

任何人都知道如何做到这一点，所以我的图片每列连续排列 4 行？那么每个水平行有4张图片？这是一个示例 https://ibb.co/HT8CyWy

当我把它们放在不同的部分时，我还希望它们每行有 4 张图片而不是 2 张。我是 html 和 css 新手，所以我只需要帮助

这是我的代码

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 90px;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
  
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
</style>
<body>


  
<!-- MAIN (Center website) -->
<div class="main">

<h1>title test</h1>
<hr>

<h2>title test
</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> All Products</button>
  <button class="btn" onclick="filterSelection('2')"> test2</button>
  <button class="btn" onclick="filterSelection('3')"> test 3</button>
  <button class="btn" onclick="filterSelection('4')"> test 4</button>
    <button class="btn" onclick="filterSelection('5')"> test 5</button>
      <button class="btn" onclick="filterSelection('6')"> test 6</button>
        <button class="btn" onclick="filterSelection('7')"> test 7</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column ">
    <div class="content">
      <img src="pic/1.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column 4">
    <div class="content">
      <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column ">
    <div class="content">
      <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/1.jpg" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

</body>

标签： htmlcss

解决方案

body { 
  display: grid;
  grid-template-columns: 50px 100px 100px 100px 100px 100px 100px 100px 50px;
  grid-template-rows: 20px auto 10px auto auto;
  background-color: purple;
}

p {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.picture {
  width: auto;
  min-height: 200px;
  background-color: blue
}

#menu {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 2;
  grid-row-end: 3;
  margin: 0 auto 0 auto;
  background-color: transparent;
}

.menuButton {
  text-align: center;
  margin: 2x 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  background-color: white;
  color: black;
  display: inline-block;
}

.menuButtonStart {
  text-align: center;
  margin: 2x 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  background-color: grey;
  color: white;
  display: inline-block;
}

#A1 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
}

#B1 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
}

#C1 {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
}

#D1 {
  grid-column-start:8;
  grid-column-end: 9;
  grid-row-start: 4;
  grid-row-end: 5;
}

#A2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 7;
}

#B2 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 7;
}

#C2 {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 7;
}

#D2 {
  grid-column-start:8;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 7;
}
  
<body>
  <div id="menu" align="center">
    <a href="">
      <div class="menuButtonStart">All Products</div></a>
    <a href="">
      <div class="menuButton">Frozen seafood</div></a>
    <a href="">
      <div class="menuButton">Dim Sum</div></a>
    <a href="">
      <div class="menuButton">Banquet Abalone</div></a>
    <a href="">
      <div class="menuButton">Froozen goods</div></a>
    <a href="">
      <div class="menuButton">Quality Accessories</div></a>
    <a href="">
      <div class="menuButton">Mid-autumn moon cakes</div></a>
  </div>
  <div id="A1">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="B1">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="C1">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="D1">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="A2">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="B2">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="C2">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
  <div id="D2">
    <div class="picture"></div>
    <p>Add a descripion</p>
  </div>
</body>

使用网格来做到这一点 -> 最简单的解决方案，同时在使用百分比时也能做出响应。

推荐阅读