时间戳

首页 > 解决方案 > css grid fit-content内容超出垂直书写模式

html - css grid fit-content内容超出垂直书写模式

问题描述

我正在使用由两个div元素组成的网格布局和以下列模板：
fit-content(25%) auto.

我希望第一个div与网格高度一样高，其中包含垂直书写和居中的文本。
我还希望第一个div包含 a fieldset，因此我设置了display: flexand align-items: stretch，fieldset因此包含的项目具有最大可用高度。

我设置了以下示例：

div#grid {
    display: grid;
    grid-template-columns: fit-content(25%) auto;
}

div#first-column > fieldset {
    display: flex;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
}

div#sideways {
    writing-mode: tb-rl;
    transform: rotate(0.5turn);
    text-align: center;
}
<div id="grid">
    <div id="first-column">
        <fieldset>
            <div id="sideways">
                <a href="#">Sideway Text</a>
            </div>
        </fieldset>
    </div>
    <div id="second-column">
        text<br/>
        to<br/>
        make<br/>
        the<br/>
        grid<br/>
        higher<br/>
        <br/>
        <br/>
    </div>
</div>

如您所见，第一个网格列中的垂直文本超出范围。
使用 css 调试器在 firefox 中重新启用该text-align: center属性时，文本会正确呈现。
在 chrome 中，重新启用 box-sizing 属性时布局会发生变化。
观看以下视频：
https ://screens.totally.rip/2018/09/vokoscreen-2018-09-25_23-33-02.webm

我的猜测是浏览器无法计算第一个网格列的宽度，因为文本是垂直书写的。
但也许我只是没有正确使用一些 css 属性。

标签： htmlcsscss-grid

解决方案

如果您希望第一列占据所有宽度..try

flex:1;

在第一列 div 中。但是如果你想让 .first-column 像在边栏中一样在左侧
设置网格区域并定义每个然后应用于 div

.grid {display:grid;
grid-template-column: ...
grid'template-row:....
  grid-area: 
         "first  first second"
        "first  first second"}
.first-column {grid-area:first}
.Second-column:{grid-area:second}

也就是说：如果你想要两个垂直列，第一列大于第二列 注意：已经使用类（。）但不介意使用 ma 电话打字，所以使用你的数字符号有点糟糕

推荐阅读