Flexbox在摘要标记中不起作用 [英] Flexbox doesn't work in summary tag

问题描述

我有这支笔，它的布局是浮动的，但是当我尝试在布局下面的一个容器中伸缩框时，伸缩框不起作用.我知道它是由浮动引起的，但是找不到解决它的方法.尝试使用clearfix，但不起作用.

I have this pen where the layout is floated, but when I try to flexbox one container below the layout, the flexbox doesn't work. I know it is caused by the floats however, can't find a way to fix it. Tried to use clearfix but it doesnt work.

我要展示的商品在摘要标签中.

The items that i'm trying to flex is in summary tag.

代码段:

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

推荐答案

问题是您在

The problem is that you are using flexbox in a summary tag, which is not a structural one. summary is used inside a details element. Consider using a proper semantic tag like article or section for this, and it will work.

代码段:

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>

这篇关于Flexbox在摘要标记中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！