多线块元素

我的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下面。 –

回答