html – 使用可变宽度创建定义LIst(包括JSFiddle)

概述我有一个定义列表,其中术语和定义都有不同的宽度.[编辑：澄清,当我说不同的宽度,我的意思是他们不能固定宽度.显然,通过设置”的宽度可以很容易地实现这种效果.我需要每对并排放置,如果需要变成多线,而不是在下面包裹. 这是一个JSFiddle显示我的问题：http://jsfiddle.net/2H9YN/(代码如下) [编辑：请注意,颜色仅供参考.它们对最终设计并不重要] 我目前有这个： 但我想要这 我有一个定义列表,其中术语和定义都有不同的宽度.[编辑：澄清,当我说不同的宽度,我的意思是他们不能固定宽度.显然,通过设置”的宽度可以很容易地实现这种效果.我需要每对并排放置,如果需要变成多线,而不是在下面包裹.

这是一个Jsfiddle显示我的问题：http://jsfiddle.net/2H9YN/(代码如下)

[编辑：请注意,颜色仅供参考.它们对最终设计并不重要]

我目前有这个：

但我想要这个：

HTML：

<dl>    <dt>dt: Lorem Ipsum</dt>    <dd>dd: Lorem imperdIEt </dd>    <dt>dt: Lorem ID libero in Ipsum</dt>    <dd>dd: Lorem ID libero in ipsum dolor </dd>    <dt>dt: Lorem Ipsum</dt>    <dd>dd: I should be sitting to the right of the prevIoUs dt and not wrapPing round below it.</dd>    <dt>dt: Lorem ID libero in Ipsum</dt>    <dd>dd: Lorem in ipsum dolor </dd></dl>

CSS：

dl{    wIDth:400px;    background-color: rgba(0,0.2);    float: left;}dt{    clear:both;    float:left;    background-color: rgba(255,0.3);}dd{    float:left;    background-color: rgba(0,255,0.3);    margin: 0 0 0 4px;}

基本上我正在寻找< dd>通过< dt>填充它留给它的空间,如果这意味着它需要包裹,它包裹在自身下方,而不是在相邻的< dt>下面.

解决方法 这是一些可能有效的CSS：

dl {    wIDth: 400px;    background-color: rgba(0,0.2);    overflow: auto;}dt {    background-color: rgba(255,0.3);    float: left;    clear: left;    margin-right: 10px; /* margin work */    padding: 5px; /* padding works */}dd {    background-color: rgba(0,0.3);    display: table-cell;    padding-left: 10px; /* padding works */    padding-bottom: 10px;    margin-left: 100px; /* margin does not work */    margin-bottom: 100px;}

小提琴参考：http://jsfiddle.net/audetwebdesign/45jDK/

解释它为何起作用

(1)要查看背景颜色,请为dl设置overflow：auto.由于所有子元素都是浮动的,因此默认情况下高度会折叠为零.

(2)你想要dt从一个新行开始,所以使用clear：left,这样dt不会尝试在短dd元素之后流动.

(3)对于dd,使用display：table-cell似乎可以解决问题.

在dt上,填充和边距按预期工作.在dd上,填充有效,但边距没有影响,可能是因为表格单元格如何工作.

我在firefox中试过这个,但没有其他地方.

PS我在其中一个dt元素上添加了一些额外的内容,以了解极端情况如何呈现.我还尝试了dl的宽度,布局保持稳定.

总结

以上是内存溢出为你收集整理的html – 使用可变宽度创建定义LIst(包括JSFiddle)全部内容，希望文章能够帮你解决html – 使用可变宽度创建定义LIst(包括JSFiddle)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。