使用可变宽度< dt>创建定义LIst和< dd> (包括JSFiddle) [英] Creating a Definition LIst with Variable-Width <dt> and <dd> (Includes JSFiddle)
问题描述
我有一个定义列表,其中术语和定义都有不同的宽度。 的宽度来实现,我需要每对并排放置,如果必要,变成多行,不包括。
这是一个JSFiddle显示我的问题:
说明为什么会起作用
(1)要查看您的背景颜色,请设置 overflow:auto
c> dl 。因为所有的子元素都是浮动的,所以默认情况下它的高度会折叠为零。
(2)你想要 dt
要在新行上开始,因此使用 clear:left
,使 dt
code> dd 元素。
display:table-cell
似乎可以做到。
在 dt
, padding
和 margin
按预期工作。在 dd
, padding
工作,但 margin
可能是因为 table-cell
的工作原理。
我在Firefox中尝试过, >
PS
我在 dt
元素来了解极端情况如何呈现。我还尝试了 width 的
dl
,布局保持稳定。
I have a definition list in which both term and definition are of varying widths.[EDIT: To clarify, when I say varying widths, I mean that they must not be fixed width. Obviously, this effect is easily achieved by setting the width of the `'] I need each pair to sit side-by side, with the becoming multi-line if necessary, without wrapping underneath the .
Here is a JSFiddle showing my problem: http://jsfiddle.net/2H9YN/ (Code below)
[EDIT: Please note that the colours are for reference only. They are not significant to the final design]
I currently have this:
But I want this:
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, 0, 0.2);
float: left;
}
dt
{
clear:both;
float:left;
background-color: rgba(255, 0, 0, 0.3);
}
dd
{
float:left;
background-color: rgba(0, 255, 0, 0.3);
margin: 0 0 0 4px;
}
Essentially I am looking for the <dd>
to fill the space left to it by the <dt>
, and if this means it needs to wrap, that it wraps below itself, not below the adjacent <dt>
.
Here is some CSS that may work:
dl {
width: 400px;
background-color: rgba(0, 0, 0, 0.2);
overflow: auto;
}
dt {
background-color: rgba(255, 0, 0, 0.3);
float: left;
clear: left;
margin-right: 10px; /* Margin work */
padding: 5px; /* Padding works */
}
dd {
background-color: rgba(0, 255, 0, 0.3);
display: table-cell;
padding-left: 10px; /* Padding works */
padding-bottom: 10px;
margin-left: 100px; /* Margin does not work */
margin-bottom: 100px;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/45jDK/
Explanation of Why It Works
(1) To see your background color, set overflow: auto
for dl
. Since all the child elements are floated, the height collapses to zero by default.
(2) You want dt
to start on a new line, so use clear: left
so that dt
does not try to flow after a short dd
element.
(3) For dd
, using display: table-cell
seems to do the trick.
On dt
, padding
and margin
work as expected. On dd
, padding
works but margin
has no effect, probably because of how table-cell
works.
I tried this in Firefox but no where else.
PS
I added some extra content on one of the dt
elements to see how an extreme situation would render. I also experimented with the width
of dl
and the layout remains stable.
这篇关于使用可变宽度< dt>创建定义LIst和< dd> (包括JSFiddle)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!