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，它会起作用。

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将样式更改为此类

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

并在摘要中删除clear并显示：flex 每件事都会按预期工作

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

希望这有帮助

Flexbox在摘要标记中不起作用

2 个答案: