如何让 DIV-s 自动排列在一个主 DIV 内，这样较小的 DIV-s 之间就没有空格了

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

我正在尝试进行某种块显示，以显示某种文章，我有一个主 DIV 和 10 个较小的 DIV-s。我让所有较小的 DIV-s 里面都有 2 个 P thags。所有较小的 DIV-s 都可以根据其中文本的数量自动调整大小。但我遇到了一个问题，当显示 DIV-s 时，主 DIV 中的它们之间有很多可用空间。

感谢“Rene van der Lende”他告诉我这种布局称为“砖石布局”。

有谁知道我该如何解决这个问题。

以下是我使用的一些图片和代码：

**//This is the css for the main DIV**
.sve{
    position: absolute;
    width: 1320px;

    display: flex;
    flex-wrap: wrap;

    top: 10%;
    left: 15%;
    padding: 10px;
    /* background-color: white; */
}

**//This is the css for the smaller DIV-s**
.sve .d1{
    position: relative;

    flex: 1;    
    padding: 10px;
    background-color: var(--boja2);
    border-radius: 10px;
    margin: 10px;

    height:fit-content;

    /* background-color: black; */
}


**//This is the css for stylizing the P thags**
.sve .d1 p{
    padding: 20px;
    text-align: center;
    color: var(--boja1);
    border-radius: 10px;

    /* background-color: var(--boja2); */
}

**//This is the css for the one of the P thangs which determines the width of the smaller DIV it is in
//Width depends on the amount of the text in this P thag**
.pN{
    font-size: 25px;
    font-weight: bold;
    /* ⁡⁢⁣⁣𝗟𝗝𝗨𝗕𝗜𝗠 𝗧𝗘𝗘𝗧𝗧𝗘𝗘𝗘⁡ */
    white-space: nowrap;
    
}

**//This is the code for the P thag that determines the height of the smaller DIV it is in
//Height depends on the amount of the text in this P thag**
.pT{
    margin-top: -30px;
    font-size: 20px;
    
}

这是我的网站的图片，以及它现在的样子（https://i.stack.imgur.com/6DL9q.png）

Here is the picture of the main DIV with the dev tools:

我想让这些自由空间消失，并将所有较小的 DIV-s 打包在一起。

我希望人们能理解我想做什么。

这是完整的 HTML 和 CSS 代码

<!-- HTML  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="theme.css">
    <link rel="stylesheet" href="body.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
   
    </script>
</head>
<body id="b">

    <!-- <p class="pNesto"> dASDBUAYfmdkadba duidfasgd asvdifascdi</p> -->

    <!-- <input type="text" class="nesto" id="nesto"> -->

    <div class="bg"></div>
    <img class="deco" src="pngwing.com (1).png">
    <img class="deco2" src="pngwing.com (1).png">
    <img class="latice" src="pngwing.com (2).png" id="latice">
    <img class="latice2" src="pngwing.com (2).png" id="latice2">
    <div class="header">
        <ul>

            <li class="">
                <img class="logo" src="—Pngtree—sakura flowers commercial elements_4082586.png" >
            </li>

            <li class="">
                <a href="theme.html" target="_blank" class=""> Pocetna</a>
            </li>
            
    
            <li class="">
                <a href="" class="k"> Kontak</a>
            </li>
    
            <li class="">
                <a href="" class=""> Vise informacija</a>
            </li>

            <li class="pet">
                <!-- <p class="pre">DASI</p> -->
                <input  type="text" class="pre" id="pre">
            </li>

            <li class="">
                <button class="preButton" id="preButton">Search</button>
            </li>
    
        </ul>
    </div>
    <div class="sve" id="sve">
    
        <div class="d1" id="d1">
            <p class="pN"   id="p1">Attack on Titan</p>
            <p class="pT" >Attack on Titan is a old popular anime. The author is
                Hajime Isayama. He is very famous Japanese manga author. ndhuvdutasu dut sautd tsa tdgas t t dfasoudou ouo u gusduysagdhojaso ygu </p>
        </div>
    
        <div class="d1" id="d1">
            <p class="pN"   id="p2">Tokyo Revengers</p>
            <p class="pT" >Prejak animee loooool</p>
        </div>
    
        <div class="d1" id="d1">
            <p class="pN"  id="p3">K - On</p>
            <p class="pT">Opek neki tekst o animeu</p>
        </div>
        
        <div class="d1" id="d1">
            <p class="pN"   id="p4">The Miswit of Demon Kind Accademy</p>
            <p class="pT">Nesto o animeu</p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p5">Demon Slayer</p>
            <p class="pT" > Tekst o animeu, kao nesto ne znam</p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p6">Death Note</p>
            <p class="pT" > Isto prejak anime, ali su ga na kraju usrali</p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p7">Horimiya</p>
            <p class="pT" > Prelep anime, savki prep</p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p8">Future Diary</p>
            <p class="pT" > Mngo dobar anime, prep </p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p9">Haikyuu</p>
            <p class="pT" > Obojkaaaaaaaa</p>
        </div>
        
        
        <div class="d1" id="d1">
            <p class="pN"   id="p10">Baki</p>
            <p class="pT" > Beautifuluu</p>
        </div>
        
    </div>



    <script src="theme.js"></script>
</body>
</html>

/* CSS */
*{
    padding: 0px;
    margin: 0.1px;
    border: 0px;
    outline: 0px;
    list-style-type: none;
    text-decoration: none;
    color: black;
    transition-duration: 0.5s;
    
}
.bg{
    background: linear-gradient(45deg, var(--gradient1) 10%, var(--gradient2) ) ;

    /* background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); */


    /* background: linear-gradient(45deg, black 10%, red ) ; */
    width: 1920px;
    height: 1080px;
    position: absolute;
    z-index: -90;
}


body{
    --boja1: rgb(20,8,42);
    --boja2: rgb(252,245,219);
    --boja3: rgb(197,161,176);


    --gradient1: rgb(212,149,143);

    --gradient2: rgb(189,156,173);
    
    
    /* background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); */

    /* background: linear-gradient(150deg, black 50%, red ) ; */
    /* margin: 2000px; */
    
    
    
    overflow-x: hidden;
    /* overflow-y: hidden; */
    opacity: 1;
}
.pNesto{
    /* width: 100px; */
    background-color: black;
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: 1000000;
    color: white;
    padding: 10px;
}
.nesto{
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: 100000;
    outline: 3px solid black;
    padding: 5px;
}

.header{
    position: fixed;
    background-color: var(--boja1);
    height: 50px;
    width: 100%;
    z-index: 99;
}
ul{
    display: flex;
    /* background-color: white;  */
    width: 800px;
    position: relative;
    left: 33%;
    
}
ul li{
    text-align: center;
    /* background-color: red; */
    margin-left: 30px;
    font-size: 20px;
    margin-top: 14px;
    
}
ul li a{
    color: var(--boja2);
    /* background-color: blue; */
    padding: 14px;
    padding-bottom: 14px;
    padding-top: 15px;
}
ul li a:hover{
    background-color: var(--boja2);
    color: var(--boja1);
}

.logo{
    position: relative;
    /* background-color: white; */
    margin-top: -14px;
    width: 50px;
    height: 50px;
}
.logo:hover{
    transform: rotateZ(180deg);
}
.deco{
    z-index: 5;
    position: fixed;
    margin-top: -30px;
    margin-left: -25px;
    width: 300px;
    height: 800px;
    transform: rotateZ(180deg);
    z-index: 100;
}
.deco2{
    z-index: 5;
    position: fixed;
    right: 0%;
    margin-top: -30px;
    margin-right: -25px;
    width: 300px;
    height: 800px;
    transform: rotateX(180deg);
    z-index:100;
}
.latice{
    position: absolute;
    /* background-color: white; */
    top: -150%;
    left: 30%;
    rotate: 90deg;
    width: 500px;
    height: 1800px;
    transition-duration: 8s;
    display: block;
    z-index: 1100;
}
.latice2{
    position: absolute;
    /* background-color: white; */
    top: -150%;
    left: 30%;
    rotate: 90deg;
    transform: rotateY(180deg);
    transform: rotateX(180deg);
    width: 500px;
    height: 1800px;
    transition-duration: 8s ;
    transition-delay: 0.5s;
    display: block;
    z-index: 100;
}

.pre{
    position: absolute;
    height: 20px;
    outline: 2px solid var(--gradient1);
    background-color: var(--boja2);
    padding-left: 5px;
    color: var(--boja1);
    border-radius: 5px;
}
.pre:focus{
    background-color: var(--gradient1);
    outline: 2px solid var(--boja2);
    color: var(--boja2);
    /* text-shadow: 1px 1px 10px purple; */
    
}

.preButton{
    color: var(--boja1);
    margin-left: 170px;
    border: 2px solid;
    position: absolute;
    background-color: var(--boja2);
    padding: 5px; 
    margin-top: -5px;
    transition-duration: 0.2s;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px black; */
    /* border: none; */
    border: 2px solid var(--gradient1);
    border-radius: 10px;
    
}
.preButton:hover{
    transform: scale(1.2);
}
.preButton:active{
    transform: scale(0.99);
    background-color: var(--boja2);
    border: 2px solid var(--gradient1);
    color: var(--boja1);
}

@media (max-width: 480px) {
    .sve .d1 {
        height:auto;
    }
    .sve .d1 {
        width:100%;
    }
}


.sve{
    position: absolute;
    width: 1320px;

    display: flex;
    flex-wrap: wrap;


    
    top: 10%;
    left: 15%;
    padding: 10px;
    /* background-color: white; */
}
.sve .d1{
    position: relative;

    flex: 1;    
    padding: 10px;
    background-color: var(--boja2);
    border-radius: 10px;
    margin: 10px;

    height:fit-content;

    align-self: stretch
    

    /* background-color: black; */
}
.sve .d1 p{
    padding: 20px;
    text-align: center;
    color: var(--boja1);
    border-radius: 10px;

    /* background-color: var(--boja2); */
}
.pN{
    font-size: 25px;
    font-weight: bold;
    /* ⁡⁢⁣⁣𝗟𝗝𝗨𝗕𝗜𝗠 𝗧𝗘𝗘𝗧𝗧𝗘𝗘𝗘⁡ */
    white-space: nowrap;
    
    
}
.pT{
    margin-top: -30px;
    font-size: 20px;
    
    
}

// AND HERE IS SOME UNFINISHED JAVASCRIPT THAT I AM WORKING ON
let x=document.getElementById("latice");
let x2=document.getElementById("latice2");
function load(){
    x.style.top="100%";
}
function load2(){
    x2.style.top="100%";

}

document.getElementById("b");
b.style.opacity="1";
document.onload=load();
document.onload=load2();
// console.log("Ble");
function brisi(){
    x.style.display="none";
    x2.style.display="none";
}

setTimeout(brisi,4500) ;


//⁡⁢⁣⁣𝗣𝗼𝗰𝗲𝘁𝗮𝗸 𝗸𝗼𝗱𝗮⁡


let da;
let preButton=document.getElementById("preButton");


preButton.onclick=()=>{
    da=document.getElementById("pre").value;
    console.log(da);
}

let p1=document.getElementById("p1").innerHTML;
let p2=document.getElementById("p2").innerHTML;
let p3=document.getElementById("p3").innerHTML;
let p4=document.getElementById("p4").innerHTML;
let p5=document.getElementById("p5").innerHTML;
let p6=document.getElementById("p6").innerHTML;
let p7=document.getElementById("p7").innerHTML;
let p8=document.getElementById("p8").innerHTML;
let p9=document.getElementById("p9").innerHTML;
let p10=document.getElementById("p10").innerHTML;

let niz = [p1,p2,p3,p4,p5,p6,p7,p8,p9,p10];


for (const item of niz) {
    console.log(item);
}





// var _window = jQuery( window );
// jQuery(window).on('load', function () {
//      if(_window.innerWidth() > 767){ 
//      if(document.getElementById('sve') !== null) {  
//      var d1 = jQuery("sve").height();  console.log('total height: '+d1);
//      var d1half = parseInt(d1 * .60);/* Adjust this percentage to accommodate your situation best */
//      jQuery("sve").height(d1half); console.log('new height: '+d1half);
//          }
//  }
//  });
css display
1个回答
0
投票

我找到了一些替代方案来完成这项工作。

/* I added this for the main DIV aka (.sve) */
display: column;
    columns: 3;
    gap: 1em;
    

/* And this for the smaller DIV-s aka (.sve .d1) */
margin-bottom: 1em;

虽然不完美，但还算不错。

如果有人知道更好的解决方案，请随时将其留在这里。

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