css - H3的百分比宽度

Question

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

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

在里面，我有两个浮动的 div。左边的 div 是 66% 宽并且向左浮动。右边的 div 是 30% 并且向右浮动。

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

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

我目前通过反复试验将其设置为 151.5%，但我讨厌这只是一个目不转睛的猜测。我真的很想知道您将如何计算出正确的百分比。

由于它是响应式设计，我不能使用固定尺寸，它必须是百分比。

score 0 · Accepted Answer

您可以更轻松地将您的位置放置<h2>在这样的绝对位置

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

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

score 0 · Accepted Answer

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

感谢所有的帮助

score 0 · Accepted Answer

如果我理解正确，这是您问题的解决方案：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;
}

css - H3的百分比宽度

3 回答 3

Related

Reference