Question

想象一下以下标记（link to jsFiddle）：

<div style="float: right; width: 200px; height: 200px; background-color: red; margin: 0 20px 0 30px;">
     Block 1
</div>

<div style="height: 100px; background-color: green;">Block 2</div>

因为第一个块是浮动的，所以第二个块占用宽度的整个可用空间，就像没有定义块1一样。我需要为第二个块设置什么，以使其宽度最大为块1的空间减去块1的左边距？

最终结果应该是this，我在第二个块中使用了display: flex。但在我的情况下，我无法使用此解决方案，因为第二个块包含一个看起来很丑陋display: flex的段落。

注意：在我的情况下（为wiki编写模板）我可以更改第二个块的CSS！

Answer 1

给第二块一个右边距等于第一块的宽度和边距：

<div style="height: 100px; background-color: green;margin-right:230px;">Block 2</div>

<强> jsFiddle example

（旁注：尽可能避免使用内联CSS）

Answer 2

不要使用flex，只需将overflow: auto添加到第2栏：

<div style="height: 100px; background-color: green; overflow: auto;">
    Block 2
</div>

请参阅演示：http://jsfiddle.net/PXuWB/

这种方法的优点是您不必指定边距的确切长度，这在响应式设计中更有用。

通过设置overflow: auto，您可以创建一个块格式化上下文，以防止内容与任何相邻的浮动元素进行交互。

参考：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

考虑浮动元素的宽度

2 个答案: