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



我试图制作一个包含三个部分的标题。(所有部分水平排列)我希望中间部分根据其中内容(文本)的大小进行调整。当我调整这个中等大小时,我希望其他两个部分相应地调整,以便这三个部分始终占据网站的整个宽度并保持均匀。我的网站宽度是 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 创建依赖值可能很麻烦,并且很容易导致错误。最好使用 css perpricesor 如 .less 或 .sass<</p>

div class="ans>

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

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

没有得到你真正想做的事情,但请记住,$.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 来实现此目的更稳定。

最新更新