<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

使用的最佳选择bootstrap 很容易处理页面的外部主体从中您可以自动获得移动响应能力

Answer 2

要在不唤起全能 bootstrap 的情况下回答您的问题，请参阅以下内容 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> 上设置所需的宽度，例如 dd div { width: 33.3%; }。这就是许多框架，例如 bootstrap，使用其 12 列布局和三个断点来实现的。

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

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

<dl> - <dt> - <dd> tags in side by side horizontal responsive view

html

css

responsive