<dl> - <dt> - <dd>標籤並排水平響應視圖

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列布局和三個斷點。

看到這個有用的css-tricks文章更多關於如何使用flexbox的提示。

Answer 2

最好選擇使用引導 可以很容易地處理 頁面的外體，並從可自動獲得流動響應