css - 将几个 div 与其他几个 div 对齐

问题描述

我正在尝试将几个 div 容器与其他几个 div 对齐，但是遇到了问题。

我无法让红色（复选框容器）div 与灰色（按钮容器）div 对齐。

这是现在的样子（我认为底部被切断的按钮只是在我截屏时将开发人员选项设置为移动设备的问题，因为它在 codepen 中看起来不错）。

这就是我试图让它看起来的方式。

谁能帮帮我？我在想我可以将每个复选框作为按钮容器的子元素，然后相对于它定位它。该方法的问题是我想确保在调整屏幕大小时，红色复选框容器 div 不会与绿色字符容器 div 中的任何内容重叠。所以我认为拥有一个单独的 div 将是在调整屏幕大小时将所有内容保持在所需位置的最佳方式，除非我弄错了？

这是一个包含完整代码的代码笔：

https://codepen.io/TheNomadicAspie/pen/NWjKwxE

这是相关的CSS：

.bottom-container {
    position: absolute;
    height: 31.8%;
    width: 100vw;
    background-color: green;
    bottom: 0%;
}

.checkbox-grid {
    float: right;
    background-color: blue;
    width: 7.45vh;
    height: 100%;
}

.checkbox-container {
  background-color: red;
    width: 88%;
    height: 22.5%;
    top: -0.5vh;
    margin-top: 0.5vh;
}

.buttons-grid {
    float: right;
    background-color: pink;
    width: 38.2%;
    right: 0%;
}

.button-container {
    background-color: purple;
    width: 88%;
    height: 90%;
    right: 0%;
    margin-top: 0.5vh;
}

.buttons-grid button {
    position: relative;
    display: block;
    background: grey;
    height: 7.45vh;
    width: 100%;
    top: -0.5vh;
    right: 0;
    text-align: center;
}

和 HTML：

<div id="menu_bar" , class="menu-bar">
        <div id="logo", class="logo">
        </div>
        <div id="title", class="title">Title</div>
        <div id="menu", class="menu">
        </div>
    </div>
    <div id="display" , class="display">
        <div id="speech_bubble" , class="speech-bubble">
            <div id="email_container" class="email-container">
                <label for="email">Enter your email:</label>
                <input type="email" id="email" name="email">
                <button id="submit_email_btn" class="buttons">Submit</button>
            </div>
            <div id="question_text" class="question-text">Question</div>
        </div>
    </div>
    </div>
    <div id="bottom_container" , class="bottom-container">
        <div id="buttons_grid" , class="buttons-grid">
            <div id="button_1_container" , class="button-container">
                <button>Button 1</button>
            </div>
            <div id="button_2_container" , class="button-container">
                <button>Button 2</button>
            </div>
            <div id="button_3_container" , class="button-container">
                <button>Button 3</button>
            </div>
            <div id="button_4_container" , class="button-container">
                <button>Button 4</button>
            </div>
        </div>
        <div id="checkbox_grid" , class="checkbox-grid">
            <div id="checkbox_1_container" , class="checkbox-container">
            </div>
            <div id="checkbox_2_container" , class="checkbox-container">
            </div>
            <div id="checkbox_3_container" , class="checkbox-container">
            </div>
            <div id="checkbox_4_container" , class="checkbox-container">
            </div>
        </div>
        <div id="character_container" , class="character-container"></div>
    </div>
    </div>

标签： css

我能够让它工作。我将复选框网格与底部容器的顶部对齐，然后在每个复选框容器中添加一个边距底部，直到间距正确，然后在复选框网格中添加一个边距以添加间距。现在看起来很完美。

.bottom-container {
    position: absolute;
    height: 31.8%;
    width: 100vw;
    background-color: green;
    bottom: 0%;
}

.checkbox-grid {
    display: absolute;
    float: right;
    background-color: blue;
    width: 7.45vh;
    height: 100%;
  margin-right: 1vh;
}

.checkbox-container {
  background-color: red;
    width: 100%;
    height: 22.5%;
    margin-bottom: 0.8vh;
}

.buttons-grid {
    float: right;
    background-color: pink;
    width: 38.2%;
    right: 0%;
}

.button-container {
    background-color: purple;
    width: 88%;
    height: 90%;
    right: 0%;
    margin-top: 0.5vh;
}

.buttons-grid button {
    position: relative;
    display: block;
    background: grey;
    height: 7.45vh;
    width: 100%;
    top: -0.5vh;
    right: 0;
    text-align: center;
}

css - 将几个 div 与其他几个 div 对齐

问题描述

解决方案

推荐阅读