Question

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

Desired layout http://oi39.tinypic.com/2mza5ht.jpg

真正的问题是将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可以实现相同的结果，那将会有很大的帮助。

Answer 1

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

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

这是我到目前为止的地方：JSFiddle，它已经完成，但我有一些clear个问题。有什么想法吗？

See this reference on MDN

百分比宽度减去具有最少DOM元素数的像素

1 个答案: