Question

我的标题宽度为100％。在这个标题中，我有一个标题和一个图像。图像总是填满标题的4/12，标题必须以标题的8/12为中心。

我用jQuery做了一些变量，指定了标题的外部宽度和标题（参见下面的代码）。我想我应该按如下方式计算它来定位我的标题标题：将我的标题除以12并将其乘以8 - 标题标题宽度的一半。

$header_title_width = $('.header h2').outerWidth();
$header_title_height = $('.header h2').outerHeight();
$header_devided_width = $('header').outerWidth() / 12 * 8;

alert($header_devided_width);

警报返回零，因此我认为不可能像我使用它一样使用*或/。接下来我尝试在css()函数内部进行计算，但这不起作用，请参阅下面的代码

$('.header h2').css("left", "calc((" + $header_width / 12 * 8 + "px - " + $header_title_width + "px) - " + $header_title_width / 2 + "px)");

当我将变量设为2时似乎有效，请参阅下面的代码

$('.header h2').css("top", "calc(50% - " + $header_title_height / 2 + "px)");

我希望我的解释清楚。是否有人可以解释我如何用jQuery计算？

HTML / LESS

<div class="header col-md-12">
<h2 class="col-md-8">The war on drugs <br /> a deeper understanding</h2>
<a href="#">Pre order now</a>

.header {
height: 265px;
background-image: @header-bg;
background-size: cover;
position: relative;

h2 {
    color: @white;
    text-transform: uppercase;
    width: auto;
    text-align: center;
    position: absolute;
    font-size: 27px;
    line-height: 27px;
    top: ~"calc(50% - (54px / 2))";
}

a {
    font-size: 14px;
    line-height: 30px;
    background: @green;
    text-align: center;
    color: @white;
    border-radius: 5px;
    width: 120px;
    position: absolute;
    left: ~"calc((530px / 2) - (120px / 2))";
    top: ~"calc(50% + 54px)";
}

}

我该如何计算 - 除以HTML元素的outerWidth

0 个答案: