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

Question

我有以下 HTML 代码，我想问一下是否可以更改 CSS 代码并制作并排(水平) View 和响应式 View 。你可以看到现场演示 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 的情况下回答您的问题，请参阅以下内容 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 的更多提示的文章。