如何使用 flexbox 将嵌套 div 结构中的内部 div 放在新行上？

huangapple
go评论98阅读模式
英文:

How to get the inner div of the nested div structure into the new line using flex box?

问题

I want the inner div (Mem 3) in the new line, just below Mem 1, and I do not want to change the div structure at any cost. Please help.

Like this => 如何使用 flexbox 将嵌套 div 结构中的内部 div 放在新行上？


.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-child {
border: solid blue;
}

.flex-fgc {
border: solid blue;
}

.flex-inner-gc {
border: solid blue;
}

Mem 1
Mem 2
Mem 3

I tried 'flex: 1 1 100;' for the flex-inner-gc.

英文:

如何使用 flexbox 将嵌套 div 结构中的内部 div 放在新行上？

I want the inner div (Mem 3) in the new line, just below Mem 1, and I do not want to change the div structure at any cost. Please help.

Like this => 如何使用 flexbox 将嵌套 div 结构中的内部 div 放在新行上？

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .flex-container {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  6. .flex-child {
  7.   border: solid blue;
  8. }
  10. .flex-fgc {
  11.   border: solid blue;
  12. }
  14. .flex-inner-gc {
  15.   border: solid blue;
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&#39;flex-container&#39;&gt;
  2.   &lt;div class=&#39;flex-child&#39;&gt;
  3.     Mem 1
  4.   &lt;/div&gt;
  5.   &lt;div class=&#39;flex-fgc&#39;&gt;
  6.     &lt;div&gt;
  7.       Mem 2
  8.     &lt;/div&gt;
  9.     &lt;div class=&#39;flex-inner-gc&#39;&gt;
  10.       Mem 3
  11.     &lt;/div&gt;
  12.   &lt;/div&gt;
  13. &lt;/div&gt;

<!-- end snippet -->

I tried 'flex: 1 1 100;' for the flex-inner-gc.

答案1

得分: 1

  1. float 可轻松完成这个任务。
  3. <!-- begin snippet: js hide: false console: true babel: false -->
  5. <!-- language: lang-css -->
  6. .flex-child {
  7.   border: solid blue;
  8.   float: left;
  9. }
  11. .flex-fgc > * {
  12.   float: left;
  13.   border: solid blue;
  14. }
  16. .flex-inner-gc {
  17.   clear: both;
  18. }
  20. <!-- language: lang-html -->
  21. <div class='flex-container'>
  22.   <div class='flex-child'>
  23.     Mem 1
  24.   </div>
  25.   <div class='flex-fgc'>
  26.     <div>
  27.       Mem 2
  28.     </div>
  29.     <div class='flex-inner-gc'>
  30.       Mem 3
  31.     </div>
  32.   </div>
  33. </div>
  35. <!-- end snippet -->
英文:

float can easily do this.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .flex-child {
  2.   border: solid blue;
  3.   float: left;
  4. }
  6. .flex-fgc &gt; * {
  7.   float: left;
  8.   border: solid blue;
  9. }
  11. .flex-inner-gc {
  12.   clear: both;
  13. }

<!-- language: lang-html -->

  1. &lt;div class=&#39;flex-container&#39;&gt;
  2.   &lt;div class=&#39;flex-child&#39;&gt;
  3.     Mem 1
  4.   &lt;/div&gt;
  5.   &lt;div class=&#39;flex-fgc&#39;&gt;
  6.     &lt;div&gt;
  7.       Mem 2
  8.     &lt;/div&gt;
  9.     &lt;div class=&#39;flex-inner-gc&#39;&gt;
  10.       Mem 3
  11.     &lt;/div&gt;
  12.   &lt;/div&gt;
  13. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 21:13:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/76506993.html
  • css
  • flexbox
  • html
  • nested
  • newline
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定