<dl> - <dt> - <dd> 标签在并排的水平响应视图中

Question

我有以下 HTML 代码，我想询问是否可以更改 CSS 代码并制作并排（水平）视图并且也可以响应。您可以在左侧边栏中看到现场演示 here。我已经将它们移到了主横幅下方，每一个都采用全宽和垂直顺序。我希望每个人占 33% 或自动。

屏幕截图

HTML

<div class="block-content">
<dl id="narrow-by-list">
    <dt class="even">Manufacturer</dt>
    <dd class="even">
        <ol>
            <li>
                <a href="/connectors?manufacturer=634">JfsfsaST</a>
            </li>
            <li>
                <a href="/connectors?manufacturer=635">fsafsdf</a>
            </li>
            <li>
                <a href="/connectors?manufacturer=547">fsafsa</a>
            </li>
            <li>
                <a href="/connectors?manufacturer=633">TE fsaf</a>
            </li>
        </ol>
    </dd>
    <dt class="odd">Type</dt>
    <dd class="odd">
        <ol>
            <li>
                <a href="/connectors?type=613">Bfsafasd</a>
            </li>
            <li>
                <a href="/connectors?type=618">Fsafasg</a>
            </li>
            <li>
                <a href="/connectors?type=615">fasfs</a>
            </li>
            <li>
                <a href="/connectors?type=614">PfsafasfCB</a>
            </li>
            <li>
                <a href="/connectors?type=617">Pafsfle</a>
            </li>
        </ol>
    </dd>
    <dt class="even">Series</dt>
    <dd class="even">
        <ol>
            <li>
                <a href="/connectors?series=549">safK</a>
            </li>
            <li>
                <a href="/connectors?series=643">VH Pfsaf6mm</a>
            </li>
        </ol>
    </dd>
</dl>

CSS

.block-content {
    background-color: transparent;
    position: relative;
    z-index: 2;
}
.block-layered-nav dt {
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    color: #777;
    position: relative;
    cursor: pointer;
    border-radius: 7px 7px 0 0;
    margin-top: 14px;
}

.block-layered-nav dd {
    padding: 10px 15px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background-color: #fbfbfb;
}

Answer 1

要在不引发万能引导程序的情况下回答您的问题，请参阅以下jsfiddle。

HTML

<dl>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>


</dl>

SCSS

body {
  font-family:Arial, sans-serif;
}

dl {
    display: flex;
    flex-direction: row;
}
  div {
    dt {
      display: block;
    }
  }
}

这会将您的所有 <dt> 和 <dd> 对放在一行中。然后，您可以使用 CSS 断点来设置每行需要多少项目，或者只是让 flexbox 使用 flex-wrap: wrap 自动完成，并通过在 <div>s 上设置所需的宽度，例如 dd div { width: 33.3%; }。这就是有多少框架（如 bootstrap）使用 12 列布局和三个断点来实现的。

有关如何使用 flexbox 的更多提示，请参阅这篇有用的 css-tricks 文章。

Answer 2

使用引导程序的最佳选择 很容易处理页面的外部主体 并且由此您可以自动获得移动响应能力