如何使1 css值依赖于另一个？

Question

我试图用三个部分制作标题。 （所有部分都是水平排列的）我希望中间部分根据其中的内容（文本）的大小进行调整。 当我调整这个中等大小时，我希望其他两个相应地进行调整，这样三个部分总是占据整个网站的宽度并保持均匀。 我的网站宽度是1000px，这就是我设置它的方式

< div .side_header>  < div #header>   < div .side_header>

我想创建一个脚本，其中包含以下内容：“.side_header的宽度等于（1000px减去#header的宽度）*。5”这是我写的但我的语法是关闭的：

<script>
    $(document).ready(function () {
        $(".side_header").css("width", "$("#header_text").css("width") * .5");  
    })
</script>

CSS：

        #title{

        }

        .side_header{
            display:inline-block;
            background-color:#999;
        }

        #header_text{
            display:inline-block;
            background-color:#3FF;
        }

HTML：

        <div id="title">
            <div class="side_header">&nbsp;</div>
            <div id="header_text"> Header text</div>
            <div class="side_header">&nbsp;</div>
        </div>

解决方案：使用javascript制作相关值可能很麻烦，并且可能很容易导致错误。 最好使用像.less或.sass这样的css perpricessor

Answer 1

您正在尝试将宽度设置为字符串。 尝试

<script>
$(document).ready(function () {
    $(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);  
})
</script>

Answer 2

没有得到你想要做的事情，但请记住$ .css（“width”）返回元素的CSS宽度而不是它的实际宽度。 因此，如果您尝试将侧边栏宽度设置为占据其可用页面宽度的其余部分，则应使用$ .width（）来读取中间div宽度。

$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');

使用.outerWidth（）作为CSS更好，它们可以是不同的。 您可以在以下页面中找到有关它们的文档：

http://api.jquery.com/width/
http://api.jquery.com/outerwidth/

但毕竟如果你想横向定位一些div，这不是一个非常好的策略。 width（）方法在某种程度上也不能令人满意，因为你的CSS样式可能会影响中间div宽度本身。 使用实体百分比宽度比使用JS实现这一目标更稳定。