使用可变宽度< 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屋！