文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS树结构1-4-3

问CSS树结构1-4-3
EN

Stack Overflow用户

提问于 2020-07-18 15:20:07

回答 2查看 391关注 0票数 0

目前，我正在尝试创建一个列表项的v-for循环，然后要创建此列表项的树结构。但我不知道怎样才能把基本的垂直1-4-3列修正成这样。

<ul class="three">
  <li class="unordered-list">A</li>
  <li class="unordered-list">B</li>
  <li class="unordered-list">C</li>
  <li class="unordered-list">D</li>
  <li class="unordered-list">B-1</li>
  <li class="unordered-list">B-2</li>
  <li class="unordered-list">B-3</li>
</ul>

html

css

flexbox

css-grid

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-18 15:49:33

对于flexbox来说，这有点复杂，特别是当您试图构建一个动态循环时。

如果您正在寻找一个CSS唯一的解决方案，它可能更可行的CSS网格。

下面是一个需要考虑的概念，其中包含了grid-template-areas属性：

.three {
  display: grid;
  grid-template-rows: repeat(7, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  
  grid-template-areas:
  
     ".  C  ."
     ".  .  B-1"     
     "A  B  B-2"     
     ".  .  B-3"
     ".  D  ."
     ".  E  .";
}

.A   { grid-area: A; }
.B   { grid-area: B; }
.C   { grid-area: C; }
.D   { grid-area: D; }
.E   { grid-area: E; }
.B-1 { grid-area: B-1; }
.B-2 { grid-area: B-2; }
.B-3 { grid-area: B-3; }

.unordered-list {
  background-color: lightgreen;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

<ul class="three">
  <li class="unordered-list A">A</li>
  <li class="unordered-list B">B</li>
  <li class="unordered-list C">C</li>
  <li class="unordered-list D">D</li>
  <li class="unordered-list E">E</li>  
  <li class="unordered-list B-1">B-1</li>
  <li class="unordered-list B-2">B-2</li>
  <li class="unordered-list B-3">B-3</li>
</ul>

票数 2

Stack Overflow用户

发布于 2020-07-18 15:56:26

作为Michal的一个补充，我有一个柔性盒解决方案:)我同意，这可能是网格实际设计的目的。

CSS：

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

ul {
  list-style: none;
}

body {
  height: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  height: 80vh;
  width: 50vw;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 6rem;
  width: 10rem;
  border: 1px solid #333;
  border-radius: 1rem 0 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainUl {
  width: 40vw;
  height: 70vh;
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.ul2 li:nth-child(1) {
  margin-bottom: 7rem;
}

.ul2 li:nth-child(2) {
  margin-bottom: 7rem;
}

.ul2 li:nth-child(3) {
  margin-bottom: 1.5rem;
}

.ul3 {
  margin-bottom: 9rem;
}

.ul3 li {
  margin: 1.5rem 0;
}

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/main.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <ul class="mainUl">
        <div class="col1">
          <div class="box">
            <p>A</p>
          </div>
        </div>
        <div class="col2">
          <ul class="ul2">
            <li>
              <div class="box"><p>C</p></div>
            </li>
            <li>
              <div class="box"><p>B</p></div>
            </li>
            <li>
              <div class="box"><p>D</p></div>
            </li>
            <li>
              <div class="box"><p>E</p></div>
            </li>
          </ul>
        </div>
        <div class="col3">
          <ul class="ul3">
            <li>
              <div class="box"><p>B1</p></div>
            </li>
            <li>
              <div class="box"><p>B2</p></div>
            </li>
            <li>
              <div class="box"><p>B3</p></div>
            </li>
          </ul>
        </div>
      </ul>
    </main>
  </body>
</html>

https://jsfiddle.net/battleaxe/fb0urm7z/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62970239

复制

相似问题

问CSS树结构1-4-3
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS树结构1-4-3EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS树结构1-4-3
EN