gpt4 book ai didi

html - 如何将 calc() 与最小内容一起使用?

转载 作者:行者123 更新时间:2023-12-05 02:44:05 24 4
gpt4 key购买 nike

我有一个可以像这样简化的网格布局。

我想要实现的是 .side 应该默认使用 min-content 占用内容所需的任何空间,但用户可以通过增加 --size 自定义 css 属性。

我尝试了 calc(min-content + var(--size)) 但它不起作用。我无法分配特定值,例如 calc(100px + var(--size)),因为原始大小应由其内容决定。

实现这种功能的最佳方法是什么?

* {
box-sizing: border-box;
}

body {
overflow: hidden;
margin: 0;
}

.container {
--size: 10px;

width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"l t"
"l b";

/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */

grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
}

.container > * {
border: solid 1px black;
}

.side {
grid-area: l;
}

.top {
grid-area: t;
}

.bottom {
grid-area: b;
}
<section class="container">
<div class="side">This should have a 10px gutter on the right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</section>

最佳答案

对网格项使用 width:calc(100% + var(--size))。这将产生溢出,您可以通过添加间隙来纠正:

* {
box-sizing: border-box;
}

body {
overflow: hidden;
margin: 0;
}

.container {
--size: 20px;

height: 100vh;
display: grid;
grid-template-areas:
"l t"
"l b";

/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */

grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
column-gap:var(--size);
}

.container > * {
border: solid 1px black;
}

.side {
grid-area: l;
width:calc(100% + var(--size));
}

.top {
grid-area: t;
}

.bottom {
grid-area: b;
}
<section class="container">
<div class="side">This should have a 10px gutter on the right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</section>

关于html - 如何将 calc() 与最小内容一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66577637/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com