响应式 DL 和 DT 布局答案

【问题标题】：Responsive DL and DT layouts响应式 DL 和 DT 布局
【发布时间】：2012-06-22 23:47:14
【问题描述】：

我的问题是，当浏览器在某个点调整大小时，布局会中断。对于移动布局，我可以加载另一个 CSS，这很好，但在 640 像素时它看起来不太好。

有什么办法可以解决吗？也许有一些已知的布局适用于这种情况？

这是 HTML：

<html>
<dl>
    <dt>Small</dt>
    <dd>Small</dd>
    <dt>Three blind mice</dt>
    <dd>Value</dd>    
    <dt>This text is wrapped. But breaks at 640px</dt>
    <dd>Three blind mice, Three blind mice, See how they run</dd>    
</dl>
</html>

以及相关的 CSS：

dl  {
    background-color: #D0D;
    overflow: auto;
}

dt  {
   float: left;
   width: 30%;
   text-align: right;
   background-color: #DD0;
}

dd {
   width: 70%;
   float: left;
   background-color: #0DD;
}

例如，请参阅这个小提琴here。如果将浏览器调整为更小的比例，布局就会“混乱”。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

您可以尝试使用 inline-blocks 代替浮点数：

dl  {
    margin: 0px; padding: 0px;
    background-color: #D0D;
    overflow: auto;
}

dt  {
   display: inline-block;
   width: 30%;
   text-align: right;
   background-color: #DD0;
}

dd {
   width: 60%;
   display: inline-block;
   background-color: #0DD;
}

http://jsfiddle.net/L2CtV/3/

【讨论】：

如果每个dt 有多个dd 怎么办？这行不通。

【解决方案2】：

当您减小窗口大小时，它会破坏文本空间不足的原因。您可以将css属性white-space: nowrap;添加到<dt>和<dd>标签以制作一行文本。在这里查看http://jsfiddle.net/L2CtV/1/

您也可以使用 媒体查询 为不同的窗口大小设置 css 规则，但仅现代浏览器支持。

【讨论】：

关闭，但我希望它自动换行但保留布局。 dt 和 dd 内容应始终可见。 PS：我正在使用媒体查询。上面的代码只是为了说明问题。