搜索

首页  >  问答  >  正文

CSS Grid布局:将跨越多行的元素的基线与其他列的底部行对齐。

<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>
P粉032649413P粉032649413560 天前460

全部回复(2)我来回复

  • P粉645569197

    P粉6455691972023-08-03 00:56:55

    由于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>


    回复
    0
  • P粉555696738

    P粉5556967382023-08-03 00:54:09

    我相信你想要声明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;
    }
    <div id="grid">
      <div id="a">aaaaa</div>
      <div id="b">bbbbb</div>
      <div id="c">ccccc</div>
    </div>

    回复
    0
  • 取消回复