0

我的问题是，当浏览器在某个点调整大小时，布局会中断。对于移动布局，我可以加载另一个 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;
}

​例如，请参见这里的小提琴。如果将浏览器调整为更小的比例，则布局会“混乱”。

4

2 回答 2

3

您可以尝试使用 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/

于 2012-06-22T15:47:14.630 回答
0

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

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

于 2012-06-22T08:39:45.573 回答