DIV的背景在更改了借助JS的帮助中显示DIV的显示方式后不会填充整个DIV

Question

我执行了特定着陆网站的成立，该网站由14个小组组成。

在该布局的第三组中，有代码中的列为divs，其中每一个都包含图像，H3和一些文本。如果屏幕的宽度为768px或更高，则必须在水平行中一一显示列。如果此宽度较低，则应将这些列放置在垂直行中。这意味着第二个必须低于第一个，第三个低于第二个。

目前，有关列的所有内容都正常。特别是，经过一些JavaScript代码操纵之后。但是，第三组的背景是粉红色的，无论垂直或水平如何，这些列所在的整个空间都应覆盖整个空间。但是，如果由于未知原因，屏幕的宽度为768px或更高，则必要的DIV并未完全填充，而仅填充上部。如果屏幕的宽度见证了该设备是手机，那么所有内容都与正确显示。

let width = screen.width;
    var x = document.getElementsByClassName("column-G3");
    var y = document.getElementsByClassName("column-G3-outside");
    if(width<768)
    {
        for(var i = 0; i < x.length; i++)
        {
            y[i].style.width = "100%";
            x[i].style.width = "100%";
        }
    }
    else if(width>=768)
    {
        width*=0.85;
        width_block = Math.floor(width*0.3);
        margin_block = (width - width_block*3);
        for(var i = 0; i < x.length; i++)
        {
            x[i].style.width = width_block + 'px';
            x[i].style.display = "block";
            x[i].style.marginLeft = "auto";
            x[i].style.marginRight = "auto";
            y[i].style.float = "left";
            y[i].style.width = "33%";
        }
    }

.G3
{
background: #a914b5;
background-size: cover;
font-size: 2vh;
padding-bottom: 5vw;
padding-top: 5vw;
}

.G3 p
{
font-family: 'Raleway', sans-serif;
font-weight: 500;
}

.center-in-G3
{
width: 100%;
}

.center-in-G3 img
{
display: block;
margin-left: auto;
margin-right: auto;
}

.center-in-G3 h3
{
text-align: center;
}

.column-G3
{
width: 100%;
}

<div class="G3">
    <div class="align-center">
        <div class="column-G3-outside">
            <div class="column-G3">
                <div class="center-in-G3">
                    <img src="./images/3/Icon.png">
                    <h3>New Music</h3>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
            </div>
        </div>
        <div class="column-G3-outside">
            <div class="column-G3">
                <div class="center-in-G3">
                    <img src="./images/3/Icon.png">
                    <h3>New Group</h3>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
            </div>
        </div>
        <div class="column-G3-outside">
            <div class="column-G3">
                <div class="center-in-G3">
                    <img src="./images/3/Icon.png">
                    <h3>New Themes</h3>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
            </div>
        </div>
    </div>
</div>

Answer 1

您为什么不与显示：grid;？它将更轻松，更好。有很多站点可以制作网格，并从您制作的网格中接收代码。