如何在网格中独立平铺div，而不管行中div的最大大小？

问题描述 投票：1回答：2

我想平铺一个像这样的图像：this我最终得到的是：this。 这是我的HTML，CSS和JavaScript代码：

window.onload = newWindow ;

function newWindow() {
    var data = JSON.parse(phrases);
    console.log(data);

    for (let i = 0 ; i < data.length ; i++) {
        let column = document.createElement("DIV"); 
        column.className = "column";
        let card = document.createElement("DIV");
        var br = document.createElement("br");
        card.className = "card";

        let theme =  `theme : ` + data[i].theme;
        let content = document.createTextNode(theme)
        card.appendChild(content);
        card.appendChild(br);

        var br1 = document.createElement("br");

        let sourceText = `sourceText : ` + data[i].sourceText;
        content = document.createTextNode(sourceText);
        card.appendChild(content);
        card.appendChild(br1);

        var br2 = document.createElement("br");

        let translation = `translation : ` + data[i].translation;  
        content = document.createTextNode(translation);
        card.appendChild(content);
        card.appendChild(br2);

        column.appendChild(card);
        document.getElementById("cards-container").appendChild(column);
    }
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.row{
    display: grid;
    grid-template-columns: 33% 33% 33%;
}
.column {
    margin: 10px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #f1f32f;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
<!DOCTYPE html>
<html lang>
    <head>
    <title>Greeting Cards</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script src="./scripts.js"></script> 
        <script type="text/javascript" src="Phrases.json"></script>
    </head>
 
    <body>
    <div id="cards-container" class="row">

    </div>
    </body>
</html>

数据来自我成功解析的外部JSON文件。我如何调整我的CSS，以便我可以在列中平铺我的divs，无论第一张图像中的div的最大大小是多少？ 我需要3列。 我的问题是严格地将元素定位在第一张图像中。我想要一个vanilla JavaScript和/或JQuery，CSS和HTML的解决方案，而不是像Bootstrap这样的任何其他框架。

javascript jquery html css
2个回答
0
投票

我不会亲自在网格上做这件事。

这是我的方法。只是基本的东西，添加了两列，并将第二列分成两列。 https://jsfiddle.net/v1wzk9cu/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Test Columns Document</title>
 </head>
 <body>

     <div id="header" class="header">Example Header</div>
        <div id="Wrapper">
     <div id="column1" class="column">
         <div class="note">&nbsp;</div>
         <div class="note">&nbsp;&nbsp;</div>
         <div class="note">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div>
         <div class="note">&nbsp;</div>
         <div class="note">&nbsp;&nbsp;&nbsp;&nbsp;</div>
     </div>

     <div id="column2" class="column">
            <div id="columnA" class="twoColumns">
         <div class="noteCol2">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div>
         <div class="noteCol2">&nbsp;<br>&nbsp;</div>
         <div class="noteCol2">&nbsp;<br>&nbsp;<br>&nbsp;</div>
         <div class="noteCol2">&nbsp;</div>
            </div>
            <div id="columnB" class="twoColumns">
         <div class="noteCol2"><br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div>
         <div class="noteCol2">&nbsp;</div>
         <div class="noteCol2"><br>&nbsp;<br>&nbsp;</div>
         <div class="noteCol2">&nbsp;</div>
     </div>
     </div>

   </div>
 </body>
 </html>

和CSS

.column{
background-color: #FF3636;
float:left;

}

.twoColumns{
background-color: #FF3636;
float:left;
}

.note{
width: 95px;
background-color: #FFF34D;
border: 1px black solid;
margin: 3px;
padding: 10px;
}

.noteCol2{
width: 95px;
background-color: #FFF34D;
border: 1px black solid;
margin: 3px;
padding: 10px;
}

#Wrapper{
margin: auto;
max-width: 450px;
}
0
投票

所以我认为最简单的解决方案是flexbox，虽然更强大的解决方案是javascript，其算法可以根据所需的列计算空间。

我无权访问您的JSON，但在下面您将找到一个与您拥有的结构非常相似的结构：

<div class="wrapper">
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 02
  </div>
  <div class="card">
    This is a card 03
  </div>
  <div class="card">
    This is a card 04<br />
    Its bigger

  </div>
  <div class="card">
    This is a card 05
    <br />
    Its bigger
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
  <div class="card">
    This is a card 06
    <br />
    Its bigger much bigger
  </div>
  <div class="card">
    This is a card 07
  </div>
  <div class="card">
    This is a card 08
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
  <div class="card">
    This is a card 09
    <br />
    Its bigger
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
</div>

有点css：

.wrapper {
  width: 100%;
  max-height: 200px;
  display: flex;
  flex-flow: column wrap;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #f1f32f;
    margin: 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

flexbox将尝试填充垂直空间，当没有空间时，它将水平折断并尝试再次垂直填充，依此类推。因此网格将基于包装器div的高度。你可以在这里找到一个有效的例子：

https://jsfiddle.net/rogerssampaio/yp6xqh3a/8/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.