1

我正在尝试找到纯 CSS 解决方案，该解决方案将使用最少数量的 DOM 元素且没有任何图像来呈现此布局。

所需布局

真正的问题是让 div 的宽度为 50% 减去一些像素 - 例如 50% 宽度减去 10px

我尽我最大的努力建立了一个jsfiddle - 这很完美，但我希望有更少的 DOM 元素。

这是我的 HTML：

<div class="main"></div>
<div class="backHalf">
    <div class="backLeft1"></div>
    <div class="backLeft2"></div>
    <div class="backLeft3"></div>
</div>
<div class="backHalf">
    <div class="backRight1"></div>
    <div class="backRight2"></div>
    <div class="backRight3"></div>
</div>

和 CSS：

.main, .backHalf div { height: 10px; background-color: #000}
.backHalf { width: 50%; float:left}
.backMain { height: 50px; }
.backLeft1 { margin-right: 10px; }
.backRight1 { margin-left: 10px; }
.backLeft2 { margin-right: 20px; }
.backRight2 { margin-left: 20px; }
.backLeft3 { margin-right: 30px; }
.backRight3 { margin-left: 30px; }

顺便说一句，我确信如果有更好的解决方案，它不会少很多 DOM 元素，但即使丢失一个也会有所帮助。例如，如果没有'backHalf' div 有可能实现相同的结果，那将有很大帮助。

4

1 回答 1

4

您可以使用 CSS3 的新功能calc()，它允许您直接在 CSS 中计算宽度或高度。

示例：calc(50% - 10px);

这是我到目前为止的位置：JSFiddle，它已经完成了很多，但我有一些clear问题。有任何想法吗？

请参阅 MDN 上的此参考

于 2013-10-24T18:42:26.543 回答