包含DOM元素数量最少的像素宽度减去像素数

我试图找到纯粹的CSS解决方案，该解决方案将使用最少数量的DOM元素呈现此布局，并且没有任何图像。包含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的情况下达到相同的结果，那将会有很大帮助。

来源

2013-10-24 Fijjit

较少的dom元素？现在不要贪婪，你现在做得很好 – Ibu

如果你不需要老版本的浏览器，box-sizing是你的朋友 –

我不确定你是否可以在没有CSS预处理器的情况下做到这一点，但我不是专家。 – wootscootinboogie

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

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

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

See this reference on MDN

来源

2013-10-24 18:42:26 Pibolo

这太好了。应该提到我理想地支持IE8 - 我知道我在这里问很多！不过，我可能会使用胡须来为IE8提供一个稍微不同的模板，以便较新的浏览器不会受到影响。 – Fijjit

顺便说一句，如果您重新排列浮动的div，您的明确问题就会消失，所以它们左右/左/右/左/右/右 – Fijjit

包含DOM元素数量最少的像素宽度减去像素数

回答

相关问题