时间戳

首页 > 解决方案 > 如何让 div 像表格一样对齐

html - 如何让 div 像表格一样对齐

问题描述

使用以下代码，我希望每个 div 都显示在前一个跨度的右侧，就像表格中 tr 的第二个 td 一样，并且每个后续 div 都显示在前一个 div 的下方。我已经尝试过各种配置中的 float:right 和 div div:first ，到目前为止，一切看起来都与我需要的完全不同。我很想知道我错过了什么。如果有人可以提供帮助，我将不胜感激！

<div>
    <span>Left side of all inner divs</span>
    <div>
        <div>
            <span>Left side of first row</span>
            <div>
                <span>Right</span>
                <span>side</span>
                <span>of first</span>
                <span>row</span>
            </div>
        </div>
        <div>
            <span>Left side of second row</span>
            <div>
                <span>Right side</span>
                <span>of second row</span>
            </div>
        </div>
        <div>
            <div>
                <span>Whole</span>
                <span>third</span>
                <span>row</span>
            </div>
        </div>
        <div>
            <span>Whole fourth row</span>
        </div>
    </div>
</div>

标签： htmlcss

解决方案

您可以使用 flex 或网格显示来做一些事情。

像这样的东西：

.Table-Container {
    display: flex;
}

.Table-Aside {
    display: flex;
    justify-content: center;
    align-items: center;
    width : 200px;
    background : #f4f4f4;
    border : solid 1px #1c1c1c;
}

.Table {
    display: grid;
    grid-auto-flow: rows;
    width: 100%;
}

.Table__Row {
    display: grid;
    width: 100%;
    grid-auto-flow: column;
    grid-template-columns: 1fr;

    /* Repeat cell of same size with min-width 50px, and max = available width */
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); 
}

.Table__Cell {
    display: flex;
    justify-content: center;
    align-items: center;
    border : solid 1px #1c1c1c;
    min-height: 50px;
}
<div class="Table-Container">
    <div class="Table-Aside">
        <span>Left side of all inner divs</span>
    </div>
    <div class="Table">
        <div class="Table__Row">
            <div class="Table__Cell">
                <span>Left side of first row</span>
            </div>
            <div class="Table__Cell">
                <span>Right</span>
                <span>side</span>
                <span>of first</span>
                <span>row</span>
            </div>
        </div>
        <div class="Table__Row">
            <div class="Table__Cell">
                <span>Left side of second row</span>
            </div>
            <div class="Table__Cell">
                <span>Right side</span>
                <span>of second row</span>
            </div>
        </div>
        <div class="Table__Row">
            <div class="Table__Cell">
                <span>Whole</span>
                <span>third</span>
                <span>row</span>
            </div>
        </div>
        <div class="Table__Row">
            <div class="Table__Cell">
                <span>Whole fourth row</span>
            </div>
        </div>
    </div>
</div>

推荐阅读