0

私の問題は、特定の時点でブラウザのサイズが変更されると、レイアウトが崩れることです。モバイル レイアウトの場合、別の 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;
}

例については、こちらのフィドルを参照してください。ブラウザのサイズを小さくすると、レイアウトが「台無し」になります。

4

2 に答える 2

3

フロートの代わりにインラインブロックを試すことができます:

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;を追加して、1 行のテキストにすることができます。ここでチェックしてくださいhttp://jsfiddle.net/L2CtV/1/<dt><dd>

また、メディア クエリを使用してさまざまなウィンドウ サイズの CSS ルールを設定することもできますが、これは最新のブラウザーでのみサポートされています。

于 2012-06-22T08:39:45.573 に答える