響應式DL和DT佈局

我的問題是，當瀏覽器在某個點調整大小時，佈局會中斷。對於移動佈局，我可以加載另一個CSS，這很好，但在640px，它看起來不太好。響應式DL和DT佈局

有沒有辦法可以修復它？也許有一些已知的佈局適用於這種情況？

下面是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。如果您將瀏覽器調整爲較小的比例，則佈局會「變得混亂」。

來源

2012-06-22 Derick Schoonbee

你可以嘗試直列塊代替彩車：

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-22 15:47:14 Lowkase

如果你有多個'dt'每個'dt'？這不起作用。 – MaxGhost

當您減小窗口大小時，它會中斷文本的原因，該文本沒有足夠的空間。您可以將css屬性white-space: nowrap;添加到<dt>和<dd>標籤中以製作一行文本。點擊此處查看http://jsfiddle.net/L2CtV/1/

也可以使用媒體查詢爲不同窗口大小設置css規則，但僅受現代瀏覽器支持。

來源

2012-06-22 08:39:45 yarm

關閉，但我想它想換行，但保持版式。 dt和dd內容應始終可見。 PS：我正在使用媒體查詢。上面的代碼只是爲了說明問題。 –

響應式DL和DT佈局

回答

相關問題