基本html和css幫助圖片
[英]Basic html and css help picture
問題描述
任何人都知道如何做到這一點，所以我的圖片每列連續排列 4 行？ 那么每個水平行有4張圖片？ 這是一個示例https://ibb.co/HT8CyWy
當我將 go 放在不同的部分時，我還希望它們每行有 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>
2 個解決方案
解決方案1
2 已采納 2020-08-16 22:50:52
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>
使用網格來做到這一點 -> 最簡單的解決方案，同時在使用百分比時也能做出響應。
解決方案2
1 2020-08-16 21:31:14
您的列是 33%，4 行需要 25%
CSS鏈接（基本幫助）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.