html dd并排显示,<dl> - <dt> - <dd>标签并排水平响应视图

我有以下的HTML代码，我想问一下它是否有可能改变CSS代码并制作一个并排(水平)视图并响应。您可以在左侧边栏看到一个实时演示here。我已经将它们移动到主横幅下方，并且每个都以全角和垂直顺序排列。我希望每个人都拿33％或自动。

-

标签并排水平响应视图

SCREENSHOT

HTML

Manufacturer

1. JfsfsaST

2. fsafsdf

3. fsafsa

4. TE fsaf

Type

1. Bfsafasd

2. Fsafasg

3. fasfs

4. PfsafasfCB

5. Pafsfle

Series

1. safK

2. VH Pfsaf6mm

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;

}

+0

我们需要能够看到它现在如何流动，所以需要CSS，如果你有一个屏幕快照显示你想要它的样子总是有帮助的 –

+0

@LGSon好的这里是截图。 –