Question

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

SCREENSHOT

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>上设置所需的宽度，如dd div { width: 33.3%; }。这就是有多少框架，比如bootstrap，用它们的12列布局和三个断点来做。

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

Answer 2

使用bootstrap的最佳选择它易于处理页面的外部主体从中你可以自动获得移动响应

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

2 个答案: