缩小屏幕垂直距离

I'm building a page using Infima.

When the screen is large, the current layout is OK: abc and def are on the right side of the textarea, and I want the row of abc and the row of def to have some distance between them. I realize it by <br/><br/><br/><br/>.

When the screen is narrow, the position of abc is OK (i.e., just under the textarea). However, I want def to be just below abc.

有谁知道如何实现这一目标?

<html>
  <head>
    <link rel="stylesheet" href="https://www.10studio.tech/css/infima.default.css">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col col--12">
          <div class="row align-items-end">
            <div class="col col--7">
              <textarea rows="10" cols="50">
              </textarea>
            </div>
            <div class="col col--3">
              abc
              <br/><br/><br/><br/>
              def
          </div>
        </div>
      </div>
  </body>
</html>
评论
  • 深夜、徘徊
    深夜、徘徊 回复

    给父元素显示:flex属性和flex-direction:列。

    <html>
    
    <head>
        <link rel="stylesheet" href="https://www.10studio.tech/css/infima.default.css">
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col col--12">
                    <div class="row align-items-end">
                        <div class="col col--7">
                            <textarea rows="10" cols="50"></textarea>
                        </div>
                        <div class="col col--3"  style="display: flex;flex-direction: column;">
                            <span>abc</span>
                            <span>def</span>
                            <!-- abc
                            <br /><br /><br /><br />
                            def -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    

    您也错过了类容器和类行的关闭div标签。