Question

例如，我想制作3个div列，分别占页面宽度（body）的5％，15％和25％。

伪代码（HTML）：

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

伪代码（CSS）：

html
{
    height: 100%;
}

body
{
    height: calc(100% - 1em);
}

#a
{
    width: 75%;
    height: 90%;

    background: grey;
}

#b
{
    width: calc(width(body) * 0.05);
    height: 100%;

    background: red;
}

#c
{
    width: calc(width(body) * 0.15);
    height: 100%;

    background: blue;
}

#d
{
    width: calc(width(body) * 0.25);
    height: 100%;

    background: green;
}

我想知道如何在不使用脚本和定数（例如100px）的情况下执行此操作，因为有很多答案（是的，我已经尝试过向Google寻求答案），我已经看到了这些答案

Answer 1

您可以使用CSS custom properties或变量来存储身体的宽度。然后，您可以使用calc()来获取身体宽度的百分比。您可以使用var(--your-css-variable)访问变量。

不幸的是，我认为vw，绝对单位，以及也许rem 是您可以使用的唯一有效单位，用于您的身体宽度。

:root {
    /* CSS variable for body's width */
    --width-body: 100vw;
}

html { height: 100%; }

body { 
    height: calc(100% - 1em); 
    width: --width-body;
}

#a {
    width: 75%;
    height: 90%;
    background: grey;
    
    /* Flexbox will give the children div's 
       their full height. */
    display:flex;
}

#b {
    /* 0.05 represents 5% of body's width */
    width: calc(var(--width-body) * 0.05);
    background: red;
}

#c {
    /* 0.15 represents 15% of body's width */
    width: calc(var(--width-body) * 0.15);
    background: blue;
}

#d {
    /* 0.25 represents 25% of body's width */
    width: calc(var(--width-body) * 0.25);
    background: green;
}

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

Answer 2

尝试以下

table {
    width: 100%;
    height: 100%;
}
#row1 {
    width: 10%;
}
#row2 {
    width: 30%;
}
#row3 {
    width: 50%;
}

如何在另一个元素上建立CSS属性？

2 个答案: