css - 响应式设计和留边距

Question

我正在制作一个具有 2 列 (DIV) 布局的响应式网站。我使用 display:inline-block 对齐 DIV，并使用 margin-left 将 DIV2 与 DIV1 分开。

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

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

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

你会看到虽然 DIV2 没有内容，它仍然会把 DIV1 推到左边。

Answer 1

处理它的最简单方法是将元数据添加到您的 DOM，但它似乎不是一个选项。

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

position: relative;
left: 20px;

在 DIV2 上，只有当其中有内容时才会考虑这一点。

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