主页 / 问题 / 1601894
Accepted
Лена
Asked:2024-12-08 04:45:22 +0800 CST2024-12-08 04:45:22 +0800 CST

仅使用 css:flex;

  • 772

在此输入图像描述

请告诉我。有以下结构，1 个父块和 3 个子块。

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

可以放置第一个子块（红色），使其占据 2 行。第二个（橙色）位于红色右侧的顶部，占据了所有可用空间。也就是，他将绿色的方块压到了底部。

只有柔性，没有网格。红色块的宽度和高度是已知的；当然，红色块拉伸以匹配右侧两个块的高度是不希望的。好吧，如果没有其他办法，你能做什么呢...

.listtr {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
    gap: 10px;
    height: 100px;
    padding: 10px;
  }
  
.listtr > * {
    &.img {
        width: 11%;
        min-width: 80px;
        max-width: 120px;
    }
    &.title {
        width: calc(100% - 10px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    &.st {
        color: #6a6a6a;
        font-size: 13px;
    }
}
css3

1 个回答

  1. Best Answer

    能

    body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

body>div {
  width: calc(50% - 1vmin);
  &#n1 {
    height: 95%;
    background-color: red;
  }
  &#n2 {
    height: 60%;
    background-color: orange;
  }
  &#n3 {
    height: 38%;
    background-color: blue;
  }
}


/* For demo */

body {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 1vmin;
  gap: 1vmin;
}
    <body>
  <div id="n1"></div>
  <div id="n2"></div>
  <div id="n3"></div>
</body>

    • 1

相关问题