Flexbox 在摘要标签中不起作用

Question

我有这支笔，布局是浮动的，但是当我尝试对布局下方的一个容器进行 flexbox 时，flexbox 不起作用。我知道这是由浮动引起的，但是找不到修复它的方法。尝试使用 clearfix 但它不起作用。

我要调整的项目在摘要标签中。

---

代码片段：

summary {
  clear: both;
  padding: 20px;
  background: white;
  display: flex;
}
summary p {
  width: 33%;
  display: inline-block;
  background: pink;
  margin: 0px;
  padding-right: 20px;
}

<summary class="clearfix">
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
</summary>

---

CodePen

Answer 1

问题是您在summary 标签中使用了flexbox，它不是结构标签。 summary 在 details 元素内使用。考虑为此使用适当的语义标签，如article 或section，它会起作用。

---

代码片段：

summary,
article {
  display: flex;
}
p::before {
  content: "Paragraph.";
}
details > summary {
  display: block;
}

<summary>
  <p></p>
  <p></p>
  <p></p>
</summary>

<article>
  <p></p>
  <p></p>
  <p></p>
</article>

<details>
  <summary>Proper Usage</summary>
  <p></p>
</details>

Answer 2

将样式更改为此类

#wrapper {
  width: 90%;
  margin:auto;
  padding: 0 20px 0 20px;
  margin-bottom:20px;
display:flex;
flex-direction:column
}

并在摘要中删除 clear 和 display:flex 一切都会按预期进行

检查这个小提琴https://codepen.io/sahithiK/pen/LRqjoR?editors=1100

希望对你有帮助