Question

我有一个小的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，除了跨度顺序之外，我无法添加任何类或更改结构。

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

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

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

现在＆＃34;最后＆＃34;我需要的是调整它们。

我试过了：

在项目类上添加float：left和min-width：在IE11和Edge中完美运行，在其他浏览器中不起作用
玩显示：内联表：不起作用：有些项目无缘无故修改了高度。

编辑：完整的测试页：

<!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>

Answer 1

将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：打破＆＃34; table＆＃34;

1 个答案: