Question

我想制作标签小部件，我在html下面。这是选择标签1时

<div>
    <div class="title active">Tab 1</div>
    <div class="content">Tab 1 content</div>
    <div class="title">Tab 2</div>
</div>

如果选择了标签2，结构就像这样

<div>
    <div class="title">Tab 1</div>
    <div class="title active">Tab 2</div>
    <div class="content">Tab 2 content</div>
</div>

flexbox是针对上述结构的标签样式的正确解决方案吗？由于某种原因，我没有权利改变结构。

即使使用flexbox，我也被卡住了https://jsfiddle.net/dL6j1h54/

如何放下内容？

Answer 1

您可以使用flexbox但使用wrap以允许强制元素在新行上开始。

* {
  box-sizing: border-box;
}

.root {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.title {
  padding: 1rem;
  background-color: lightgray;
  border: thin solid darkgray;
}

.content {
  order: 2;
  width: 100%; /* Forces to go to a new line because of flex-wrap */
}

<div class="root">
  <div class="title">Tab 1</div>
  <div class="content">Tab 1 content</div>
  <div class="title">Tab 2</div>
</div>

设置具有严格DOM结构的选项卡小部件

1 个答案: