CSS Grid布局：将跨越多行的元素的基线与其他列的底部行对齐。
P粉032649413
2023-08-02 15:26:53
<p>我想将a和c的基线对齐。</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
display:grid;
grid-template-columns: 1fr 1fr;
align-items: baseline;
}
#a{
grid-row: 1 / span 2;
grid-column: 1;
padding: 8px;
background: red;
}
#b{
grid-row: 1;
grid-column: 2;
background: yellow;
}
#c{
grid-row: 2;
grid-column: 2;
background: blue;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div></pre>
<p><br /></p>
<p>我尝试将外部网格设置为单行，并将b和c包装在一个具有inline-whatever属性的div中，但是a仍然总是与b对齐而不是c。</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
display:grid;
grid-template-columns: 1fr 1fr;
align-items: baseline;
}
#a{
grid-row: 1;
grid-column: 1;
padding:8px;
background:red;
}
#d{
display:inline-block;
grid-row: 1;
grid-column: 2;
}
#b{
background:yellow;
}
#c{
background:blue
}</pre>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="d">
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div>
</div></pre>
<p><br /></p>
<p>如何使a与c对齐基线？</p>
由于last baseline相对较新（我正在使用不支持它的Electron 19），我正在寻找替代方法。参考这篇关于flex的SO帖子，结果我需要将inline-block包装在另一个容器中。
#grid{ display:grid; grid-template-columns: 1fr 1fr; align-items: baseline; } #a{ grid-row: 1; grid-column: 1; padding:8px; background:red; } #d{ grid-row: 1; grid-column: 2; } #b{ background:yellow; } #c{ background:blue } .inline-block{ display:inline-block; }<div id="grid"> <div id="a">aaaaa</div> <div id="d"> <div class="inline-block"> <div id="b">bbbbb</div> <div id="c">ccccc</div> <div> </div> </div>我相信你想要声明align-items: last baseline。
"Can I Use align-items: last baseline?"显示全球支持率为85%。
有关规范术语，请参阅Flex容器基线。
#grid{ display: grid; grid-template-columns: 1fr 1fr; align-items: last baseline; } #a { grid-row: span 2; padding: 8px; background: red; } #b { background: yellow; } #c { background: blue; }