如何在DT级别拆分DL

时间：2015-11-02 14:24:57

标签： html css css3

鉴于以下标记 - 我要求在每次出现DT时将DL拆分为新列，其中DT拥有的DD项目属于其下方

<dl class="yearly-events-split">
    <dt>2015</dt>
    <dd>Event 1 Title - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2016</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 4 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 5 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 6 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2017</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2018</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 4 - <span class="event-date">18th January - 20th January 2016</span></dd>
</dl>

<hr />

<style>
    dl.yearly-events-split {
        border: 3px double #ccc;
        padding: 0.5em;
    }

    dl.yearly-events-split dt {
        width: 25%;
        font-weight: bold;
        color: green;
        float: left;
    }

    dl.yearly-events-split dd {
        width: 25%;
        margin: 0;
        padding: 0 0 0.5em 0;
    }

</style>

我想使用DL来实现这一点，因为当我应用媒体查询使其在平板电脑或移动设备上全宽时，它将变成一个很好的列表

预期的布局是

2015 | 2016 | 2017 | 2018
Event | Event | Event | Event 
Event | Event | Event | Event 
Event | Event | Event | 
Event

每个DT下面都有可变数量的DD - 因此列高度会自然变化

我猜我应该可以用CSS3列做到这一点 - 但我不能为我的生活做出如何

2 个答案:

答案 0 :(得分：1)

我不太相信这里使用dl（描述列表）。 dl用于术语和描述对的列表，即键值对。你的ul/li是一个用例。您的用例并不意味着事件是年份的描述或含义。它更像是按年份分组的事件的分层列表。

参考here和here。

您可以轻松使用ul/li，甚至不需要媒体查询。他们将自己回应。此外，您可以使用CSS columns以您希望的方式格式化这些格式。尝试在下面的示例小提琴中调整大小，看看它们会整齐地拼凑起来。

演示代码段 

* { box-sizing: border-box; padding: 0; margin: 0; }
ul {
    list-style: none; font-family: sans-serif; font-size: 0.9em;
    -webkit-column-width: 120px;
    column-width: 120px;
}
ol, ul > li {
    list-style: none; 
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}
ul > li { background-color: #cce; font-weight: bold; }
ol { background-color: #eee; font-weight: normal; }
li { padding: 4px; }
<ul class="yearly-events-split">
    <li>2015
		<ol>
			<li>Event 1 Title - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2016
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 4 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 5 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 6 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2017
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2018
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 4 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
</ul>

<hr />

演示小提琴：http://jsfiddle.net/abhitalks/Lhbsp320/1/

编辑：

如果您因为无法更改标记而真的坚持保留dl / dt，那么您也可以使用相同的CSS。

当然，您需要添加媒体查询来调整显示。

Demo Snippet 2： 

* { box-sizing: border-box; padding: 0; margin: 0; }
dl {
    font-family: sans-serif; font-size: 0.9em;
    -webkit-column-width: 120px;
    column-width: 120px;
}
dt {
    -webkit-column-break-before: always;
    column-break-before: always;
}
dd {
    list-style: none; 
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}
dt { background-color: #cce; font-weight: bold; }
dd { background-color: #eee; font-weight: normal; }
dt, dd { padding: 4px; }
<dl class="yearly-events-split">
    <dt>2015</dt>
    <dd>Event 1 Title - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2016</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 4 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 5 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 6 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2017</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dt>2018</dt>
    <dd>Event 1 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 2 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 3 - <span class="event-date">18th January - 20th January 2016</span></dd>
    <dd>Event 4 - <span class="event-date">18th January - 20th January 2016</span></dd>
</dl>

演示小提琴2：http://jsfiddle.net/abhitalks/ghqor2q8/

编辑2：

如果您需要可靠地支持Firefox，那么您可以使用display: table来布局ul/li。对于较小的较低视口，您需要媒体查询。

Demo Snippet 3： 

* { box-sizing: border-box; padding: 0; margin: 0; }
ul {
    list-style: none; display: table;
    font-family: sans-serif; font-size: 0.9em;
}
ul > li { list-style: none; display: table-cell; }
ul > li { background-color: #cce; font-weight: bold; }
ol { list-style: none; background-color: #eee; font-weight: normal; }
li { padding: 4px; }
<ul class="yearly-events-split">
    <li>2015
		<ol>
			<li>Event 1 Title - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2016
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 4 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 5 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 6 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2017
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
    <li>2018
		<ol>
			<li>Event 1 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 2 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 3 - <span class="event-date">18th January - 20th January 2016</span></li>
			<li>Event 4 - <span class="event-date">18th January - 20th January 2016</span></li>
		</ol>
	</li>
</ul>

<hr />

演示小提琴3：http://jsfiddle.net/abhitalks/vxnyn225/1/

答案 1 :(得分：0)

有一种方法可以使用表格显示，删除所有浮动和宽度：

dl {
  display: table;   
}

dt {
  display: table-cell;
  vertical-align: top;
}

dd {
  margin: 0 0 0 -32px;
  vertical-align: top;
}

dt + dd {margin-top: 30px}

jsFiddle example here:

PD：负margin-left: -32px表示32px是dt元素的宽度，因此如果您计划为dt元素赋予任何宽度，则左边的负边距应与dt的宽度相同元件。

相关问题
最新问题