Question

这更像是一个数学问题，而不是一个编程问题，但这里有：

我有一个100％宽的容器div。

在内，我有两个漂浮的div。左边的div宽66％，左边漂浮。正确的div是30％并向右浮动。

我在左手div中有一个h2元素，我希望它超出其父级的约束并延伸到其父级的最右边缘。

如果h2元素的父元素是顶部容器的66％，那么计算h2元素的百分比宽度的公式是什么。

我目前通过反复试验将其设定为151.5％，但我讨厌这只是一种眼球猜测。我真的很想知道如何找出正确的百分比。

由于它是一个响应式设计，我不能使用固定的维度，它必须是百分比。

Answer 1

您可以更轻松地将<h2>置于绝对位置

h2 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

然后将position: relative;添加到左侧列。但如果您在该列中只有一个标记，这将很有效。否则，当您尝试放置其他<h2>元素或使用javascript计算更大容器的宽度时，您需要做更多的数学运算

Answer 2

没关系，想通了。 100％（容器宽度）除以左边的宽度（66％）= 151.515152 我的错误是将我的css百分比四舍五入到66％而不是66.66666667％。

感谢所有帮助

Answer 3

如果我理解正确，这是您问题的解决方案：http://jsfiddle.net/pgJeC/1/

注意：颜色仅设置为显示分层

.id1 {
    width:66%;
    float:left;
    background:maroon;
}
.id2 {
    width:30%;
    float:right;
    background: green;
 }
h3 {
    color:red;
    width:100%;
    white-space: nowrap;
    display:block;
}

H3的百分比宽度

3 个答案: