Question

我的问题是我在早期问题中已经说过的问题的扩展，请参阅此处Vertically align sans-serif font precisely using jquery/css。

简而言之：我想将两个div与文本对齐，一个在另一个之上，以便始终将A的开头（基本上是A的左下角）与H（左边的垂直线）对齐H）？我想要实现的目标：

顶部div有不同的字体大小，我想根据字体对齐下面的div。原因是我根据窗口大小缩放字体大小。

HTML

<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
    <div class="menubutton_left"><a href="#" id="WorkButton">A</a>
    </div>
    <div class="menubutton_middle"><a href="#" id="AboutButton">B</a>
    </div>
    <div class="menubutton_right"><a href="#" id="ContactButton">C</a>
    </div>  <span class="stretch"></span>

</div>

CSS

div.Header {
    font-family:sans-serif;
    text-align:justify;
    white-space: nowrap;
}
div.menubar {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin-bottom: 0px;
    position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width:60px;
}
div.menubutton_left {
    margin-left:12px;
}
div.menubutton_middle {
    text-align: center;
}
div.menubutton_right {
    text-align: right;
}
.stretch {
    border: 2px dashed #444;
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

JSCRIPT

resizeHead("#Hideheader", "#header");

$(window).resize(function() {
  resizeHead("#Hideheader", "#header");
});

function resizeHead(p1, p2) {
    var fontsize = parseFloat($(p1).css("font-size"));
    var spacing = parseFloat($(p1).css("letter-spacing"));
    var initWidth = $(p1).width();
    initWidth = initWidth - spacing;
    var outWidth = $(p2).width();

    var s = outWidth / initWidth;
    s = fontsize * s;
    $(p2).css({
        "font-size": s
    });
}

尝试调整浏览器窗口的大小。对于较小的字体大小，我变得特别明显

Answer 1

我不知道我是否真的理解你的问题..但是，由于你的小提琴，我想我明白你想要什么。我想建议：

1：不要使用JS来设置增加字体大小。您可以使用vw，vh或vmin等可变大小的单位。它们根据父容器更改它的大小，例如：font-size: 20vw。

比在每个窗口调整大小时触发javascript轻了很多。

2：您已为div设置了固定宽度，因此每当它变得小于60px时，您的布局就会中断。去掉它。您可以设置动态计算的宽度，例如：width: calc(100% / 3)，这样就可以相应地放置所有三个div。

3：您在第一个div上设置了margin-left也会破坏您的布局。而是将边距添加到div中的<a>标记：

div.menubutton_left a {
    margin-left:12px;
}

这是一个更新的小提琴，包含所有更改（并且没有js \ o /）：http://jsfiddle.net/ksuTQ/7/

Answer 2

好吧，我以前用我自己的应用程序解决了这个问题，但是通过草率的方式。你可能不想这样做，但无论如何我都会分享。我非常喜欢@LcSalazar发布的帖子，但我发现过去一旦我添加了具有相对定位的元素，我有时会无法配置页面的其余部分，但无论如何你似乎还是这样做了。首先尝试@LcSalazar的答案，然后如果你真的想要，试试这个。我还建议尝试使用span而不是div这样的元素，但这可能会改变整个项目。

最大的问题是，在HTML中，确实没有收集TextMetrics的好方法，因为这就是你要求的。 Canvas元素具有TextMetrics，但它们只提供宽度。

var myCanvas = document.createElement('canvas');
var myContext = myCanvas.getContext('2d');

var myText = "I'm getting measured by canvas calls!";

var textMetrics = myContext.measureText(myText);

var textWidth = textMetrics.width;

不幸的是，你要找的是高度。这就是我过去所做的。

var hiddenDiv =  document.createElement('div');
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.position = 'absolute';
hiddenDiv.style.top = '0px';
hiddenDiv.style.left = '0px';
document.body.appendChild(hiddenDiv);

var myText = "I'm getting measured by a sloppy div";

function getTextHeight(text, font)
{
   hiddenDiv.style.font = font;
   hiddenDiv.innerHTML = text;

   return hiddenDiv.clientHeight;
}

var myFont = 'normal 13px Verdana';

var textHeight = getTextHeight(myText, myFont);

然后，您可以使用文本高度执行您想要执行的任何类型的调整大小或相对定位。对不起，我没有尝试将它自己合并到你的项目中，我只想向你展示一种收集文本高度的方法，而无需编写大量代码。确保在测量之前设置div的字体！希望这有帮助！

在改变字体大小时精确地垂直对齐sans-serif字体

2 个答案: