缩小屏幕垂直距离

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标签。

点赞
评论