多線塊元素

我的HTML看起來像這樣：多線塊元素

<div> 
    <div style="display:inline-block; width: 200px;">Sidebar</div> 
    <div style="display:inline-block;">Content</div> 
</div>

我的目標是水平顯示的div和列表項。我在第二個div上使用列表項設置什麼樣式來強制其寬度填充屏幕的其餘部分（屏幕寬度 - 200px，第一個div的寬度）？我無法使用特定的px值，因爲這會破壞不同的屏幕尺寸。

此外，當第二個div中有足夠的內容進行換行時（例如，使用display：inline-block設置樣式的無序列表項），而不是換行，它會垂直顯示div。

即使使用* display：inline hack，這也不能在IE9兼容模式下工作。

這將是微不足道的使用表來實現，但我想這樣做「正確」，如果可能的話。我也不想使用浮動。

在此先感謝。

你爲什麼要避免浮動？ –

這感覺就像一個黑客浮動左邊的div，然後調整右邊div的邊距來分開它們。我會使用它，因爲這是常見的做法和工作。 –

首先，我會建議不要使用內聯：塊，而是嘗試使用浮動解決方案。也可能需要在父div上使用clearfix。

你不是很清楚你想做什麼

2011-12-12 01:09:16

浮球不適合我。在右邊div中，我有一個無序列表，它使用display：inline-block來水平顯示列表項。 –

浮動不再是內聯塊的破解。而且由於真的沒有正確的方法去做，所以使用float，這是最好的破解。我從來沒有使用內聯塊，我不認爲你應該。 Iirc，它在舊IE中不受支持 –

浮動工作在IE9兼容模式下，但不是正常的IE9或Firefox 8.問題是，正確的div具有通常包裝在div中的內容，但在現代瀏覽器中，它將正確的div在左邊的div下面。 –

回答