Question

我试图列出电影信息，我想要＆＃34;演员＆＃34;列表有两列，而不是一列长列，以便更好地利用水平空间。

但这不是我的问题。该用户试图将dt分成两列，我想将一组dd分成两列。这是我的代码：

div><h3>
    <dl>
      <dt>Director:</dt>
        <dd>Person A</dd><br>
      <dt>Writer:</dt>
        <dd>Person B</dd><br>
      <dt>Cast:</dt>
        <dd>Person C</dd>
        <dd>Person D</dd>
        <dd>Person E</dd>
        <dd>Person F</dd>
        <dd>Person G</dd>
        <dd>Person H</dd>
        <dd>Person I</dd>
    </dl></h3>
  </div>

我的CSS：

dl {
border: 3px double #ccc;
padding: 0.5em;
}
dt {
float: left;
font-weight: 400;
}
dd {
margin-left: 125px;
font-weight: 300;
}

同样，我正在寻找仅有两个列的演员表。任何和所有的帮助表示赞赏！

我完全可以使用其他列表或非定义列表。

Answer 1

好吧，你可以简单地浮动dd，就像这样：

dd{width:50%; float:left}

如果您正在寻找使用dd，我认为这是您将找到的解决方案的结束。但是，如果您打开使用其他技术，例如常规列表，p，块元素等，则可以使用列计数（不在dd中工作）。请在column count property

查看更多信息

Answer 2

我只使用CSS，使用浮动和清晰的方法：

dt {
    width: 50%;
    padding: 15px;
    float: left;
    clear: right;
    background: lightgreen;
}
dd {
    width: 50%; 
    padding: 15px;
    float: right;
    clear: right;
    background: skyblue; 
}

请参阅：https://jsfiddle.net/luminancedesign/wngjs3wg/

Answer 3

这样的东西？

dl { position: relative; }
dd { margin-left: 100px; }
dt { position: absolute; }

Demo

这不是一个非常好的方式，但是我能想到这种html并没有任何js的唯一方法。

如何在两列中定义定义列表

3 个答案: