CSS : break spans into "table"-6ren

CSS : break spans into "table"

转载作者：太空宇宙更新时间：2023-11-03 22:27:32

我有一个小的 HTML 结构:

 <div class="wrapper">
        <span class="item">dd</span>
        <span class="item">aaaaaaaa</span>
        <span class="item">cccc</span>
        <span class="item">Item 4</span>
        <span class="item">Item fsfsfdf</span>
        <span class="item">Id</span>
        <span class="item">Itsdsdsdsdsd sds dsd</span>
        <span class="item">365</span>
        <span class="item">7</span>
    </div>

我需要在 3 列和 3 行中显示这些元素。我无法编辑 HTML，除了 span 的顺序之外，我无法附加任何类或更改结构。

我找到了将它们分成 3 行的解决方案:

.wrapper span:nth-child(3n+1):before {
    content: "\A";
    white-space: pre;
}

.wrapper span:nth-child(1):before {
    content: "";
}

现在我需要做的“最后”一件事是对齐它们。

我试过了:

在元素类上添加 float:left 和 min-width :在 IE11 和 Edge 中完美运行，在其他浏览器中不起作用
玩 display:inline-table:不起作用:某些元素的高度无故修改。

编辑:完成测试页:

<!DOCTYPE html>
<html>
<head>
    <style>
        .wrapper {
            font-size: 14px;
            padding-top: 3px;
            position: relative;
            margin-left: 0px;
            width: 500px;
            background-color: red;
        }

            .wrapper span {
                background-color: #fff;
                border-radius: 1px;
                margin-right: 15px;
                min-width: 125px;
                margin-bottom: 5px;
                padding-left: 3px;
            }

                .wrapper span:nth-child(3n+1):before {
                    content: "\A";
                    white-space: pre;
                    color: green;
                }

                .wrapper span:nth-child(1):before {
                    content: "";
                }
    </style>
</head>
<body>
    <div class="wrapper">
        <span class="item">dd</span>
        <span class="item">aaaaaaaa</span>
        <span class="item">cccc</span>
        <span class="item">Item 4</span>
        <span class="item">Item fsfsfdf</span>
        <span class="item">Id</span>
        <span class="item">Itsdsdsdsdsd sds dsd</span>
        <span class="item">365</span>
        <span class="item">7</span>
    </div>
</body>
</html>

最佳答案

将 flexbox 与 flex-wrap 结合使用应该可以解决您的问题:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 33.33333%; /* column width */
  flex: 0 0 auto;
}

<div class="wrapper">
  <span class="item">dd</span>
  <span class="item">aaaaaaaa</span>
  <span class="item">cccc</span>
  <span class="item">Item 4</span>
  <span class="item">Item fsfsfdf</span>
  <span class="item">Id</span>
  <span class="item">Itsdsdsdsdsd sds dsd</span>
  <span class="item">365</span>
  <span class="item">7</span>
</div>

关于CSS : break spans into "table"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50418466/