Question

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

有没有办法解决它？也许有一些已知的布局适用于这种情况？

这是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。如果您将浏览器的大小调整为较小的比例，则布局会“混乱”。

Answer 1

您可以尝试使用内联块而不是浮点数：

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/

Answer 2

当您减小窗口大小时，它会破坏没有足够空间的文本的原因。您可以将css属性white-space: nowrap;添加到<dt>和<dd>标记以生成一行文本。请在此处查看http://jsfiddle.net/L2CtV/1/

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

响应式DL和DT布局

2 个答案: