响应式设计和保证金

Question

我正在制作一个包含2列（DIV）布局的响应式网站。我使用display:inline-block来对齐DIV并使用margin-left将DIV2与DIV1分开。

DIV2在移动设备上不会显示任何内容。当它没有内容时，由于某种原因，它仍然会以margin-left值推送DIV1。

我预计它会被完全忽略，而DIV1会单独集中，但它不会像这样。 #div2:empty不是一个选项，因为我尝试了它并且它不起作用，因为DIV2实际上不是空的;它有一个仅在移动设备上显示内容的脚本，因此:empty在这种情况下无效。

我做了一个简单的JS小提琴来演示这个问题：http://jsfiddle.net/3rvGZ/

你会看到虽然DIV2没有内容，但仍会将DIV1推向左边。

Answer 1

处理它的最简单方法是向DOM添加元数据，但似乎不是一种选择。

margin-left属性应用于空元素。 但是如果你使用

position: relative;
left: 20px;

在DIV2上

，只有在内容中才会考虑这一点。

如果这可以解决您的问题，这似乎很简单。

Answer 2

除非它打破了您希望更复杂的完整设计，否则您可以使用padding代替margin：

JSFiddle

Answer 3

使用display: none将其完全撕掉布局。

这可能不是你想要的，但这会奏效。