具有2个部分的嵌套网格显示不一致的行大小和元素重叠

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

我目前正在布置仪表板Web应用程序，并决定使用嵌套网格。这个想法是让网格显示27个原始数据和5个列。菜单（第一个子网格）应位于第一列，其余各列应包含第二个子网格，在第二个子网格中将显示内容。我们称它为主要部分。

注意：主要部分不一定需要27行。重要的是要在主部分的第1 2列上从顶部到底部均匀地分布3个网格区域。其余9个网格区域需要以3个为一组的形式显示在主要部分的其余列上。

问题：1.但是，我设置的代码似乎菜单和主要部分之间的行不相等，并且无法理解原因。2.尽管我正确设置了网格区域，但最后一个网格区域作为插槽也最终彼此重叠。

我尝试过：1.将菜单设置为27 raws，并将主要部分设置为9。2.将菜单和mainSection都设置为27行。3.将插槽1分配到不同的行，以测试它如何与菜单对齐。4.检查代码是否有任何错字。5.沮丧的日子过后，我什至不记得其他细微的调整。如果我记得其中的任何内容，我都会跟进更新和答案。

有人可以结束我的沮丧吗？ ：（

PS：由于我正在对移动设备进行编码（临时限制），因此HTML文件中包含CSS，并且无法设置HTML来识别CSS文件。

下面的代码。编辑：对不起，代码结构中的未对齐。我正在手机和平​​板电脑上编写g驱动器文件。看来，“ tab”键在两个移动平台之间的作用不同。

<!DOCTYPE html>
<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
    </head>

            <!--<div id="appTitle">protoAccounting</div>-->

    <body id="mainGrid">
        <div id="menu">

            <!--<div>-->
                <div class="menu_Item" id="menu_home">
            <div class="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Home</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_input">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Input</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_database">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Database</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_currentMonth">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Current month</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_previousMonth">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Previous month</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_ato">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">AllTimeOverview</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="menu_atelier">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Atelier</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menuItem" id="investments">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Investments</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
                <div class="menu_Item" id="futureNecesities">
                                          <div clss="notify_img" id="homeLed">img</div>
                                          <div class="title" id"homeText">Future Necesities</div>
                                          <div class="submenu" id="homeSubmenu">items</div>
                                        </div>
            <!--</div>-->
        </div>

        <div id="mainSection">
            <div id="slot1">SLOT1</div>
            <div id="slot2">SLOT2</div>
            <div id="slot3">SLOT3</div>
            <div id="slot4">SLOT4</div>
            <div id="slot5">SLOT5</div>
            <div id="slot6">SLOT6</div>
            <div id="slot4">SLOT7</div>
            <div id="slot5">SLOT8</div>
            <div id="slot6">SLOT9</div>
            <div id="slot4">SLOT10</div>
            <div id="slot5">SLOT11</div>
            <div id="slot6">SLOT12</div>
        </div>

    </body>

<style>

body {
    font-size: 1em;
    background: silver;
}

* {
    box-sizing: border-box;
}

#mainGrid {
    border: 1px solid black;
    display: grid;
    grid-template-columns: repeat(5, [col] 20% );
}

#mainSection div {
    border: 1px dotted black;
    margin: 0;
    text-align: center;
    vertical-align: middle;
}

#menu {
    grid-area:  1 / 1 / 9 / 2;
    display: grid;
}

#menu div {
          border: 1px dotted  black;
    text-align: center;
}

#mainSection {
     grid-area: 1 / 2 / 9 / 6;
     display: grid;
}

#menu_home {
    grid-area: 1 / 1 / span 1 / span 1;
}

#menu_input {
    grid-area: 4 / 1 / span 1 / span 1;
}

#menu_database {
    grid-area: 7 / 1 / span 1 / span 1;
}

#menu_currentMonth {
    grid-area: 10 / 1 / span 1 / span 1;
}

#menu_previousMonth {
    grid-area: 13 / 1 / span 1 / span 1;
}

#menu_ato {
    grid-area: 16 / 1 / span 1 / span 1;
}

#menu_atelier {
    grid-area: 19 / 1 / span 1 / span 1;
}

#investments {
    grid-area: 22 / 1 / span 1 / span 1;
}

#futureNecesities {
    grid-area: 25 / 1 / span 1 / span 1;
}

/*mainSection area*/

#slot1 {
    /*grid-area: mSlot1;*/
    grid-area: 1 / 1 / span 3 / span 2;
}

#slot2 {
    /*grid-area: mSlot1;*/
    grid-area: 1 / 3 / span 1 / span 2;
}

#slot3 {
    /*grid-area: mSlot1;*/
    grid-area: 2 / 3 / span 1 / span 2;
}

#slot4 {
    /*grid-area: mSlot1;*/
    grid-area: 3 / 3 / span 1 / span 2;
}

#slot5  {
    /*grid-area: mSlot1;*/
    grid-area: 4 / 1 / span 3 / span 2;
}

#slot6 {
    /*grid-area: mSlot1;*/
    grid-area: 4 / 3 / span 1 / span 2;
}

#slot7 {
    /*grid-area: mSlot1;*/
    grid-area: 5 / 3 / span 1 / span 2;
}

#slot8  {
    /*grid-area: mSlot1;*/
    grid-area: 6 / 3 / span 1 / span 2;
}

#slot9 {
    /*grid-area: mSlot1;*/
    grid-area: 7 / 1 / span 3 / span 2;
}

#slot10 {
    /*grid-area: mSlot1;*/
    grid-area: 7 / 3 / span 1 / span 2;
}

#slot11  {
    /*grid-area: mSlot1;*/
    grid-area: 8 / 3 / span 1 / span 2;
}

#slot12{
    /*grid-area: mSlot1;*/
    grid-area: 9 / 3 / span 1 / span 2;
}


</style>

</html>
css nested rows css-grid dashboard
1个回答
0
投票

发现了问题。复制粘贴类型错误。插槽4到6的ID在其他插槽之间重复。它固定了菜单和mainSection之间的对齐方式（没有子网格或任何复杂的东西）以及插槽之间的重叠。

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