Flexbox内嵌盒子

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

Flex box inside a box

问题

  1. 将内部框与外部框的中心右侧对齐是我的问题之一。
  2. 使用 flexbox 将内部框变成一个“行”，并在较小的显示屏上移到外部框的底部是我的问题之二。

大屏幕结果

小屏幕结果

  1. <p class="inline-block-buttons">
  2.   文本1
  3.   <a>文本2</a>
  4. </p>
  1. p {
  2.   border: 1px solid black;
  3.   margin: 2rem 0;
  4.   padding: 0.25rem;
  5. }
  7. a {
  8.   padding: 1rem 2rem;
  9.   border: 1px solid black;
  10.   text-decoration: none;
  11.   margin: 1rem;
  12.   border-radius: 2px;
  13. }
  15. .inline-block-buttons a {
  16.   display: inline-block;
  17.   align-self: right;
  18. }
  20. body {
  21.   margin: 2rem;
  22. }
  24. @media (max-width: 500px) {
  25.   .inline-block-buttons {
  26.     flex-direction: column;
  27.   }
  28. }
英文:

I'm trying to fit a box inside a box, where the layout changes depending on the screen size e.g. if under 400px.

I'm having trouble at two points:

  1. Aligning the inner box to the centre right of the outer box and
  2. Using flexboxes to make the inner box into a 'row' and fall to the bottom of the outer box on smaller displays

Large display results

Small display results

  1. &lt;p class=&quot;inline-block-buttons&quot;&gt;
  2.   Text 1
  3.   &lt;a&gt;Text 2&lt;/a&gt;
  4. &lt;/p&gt;
  1. p {
  2.   border: 1px solid black;
  3.   margin: 2rem 0;
  4.   padding: 0.25rem;
  5. }
  7. a {
  8.   padding: 1rem 2rem;
  9.   border: 1px solid black;
  10.   text-decoration: none;
  11.   margin: 1rem;
  12.   border-radius: 2px;
  13. }
  15. .inline-block-buttons a {
  16.   display: inline-block;
  17.   align-self: right;
  18. }
  19. body {
  20.   margin: 2rem;
  21. }
  22.   @media (max-width: 500px) {
  23.   .inline-block-buttons {
  24.     flex-direction: column;
  25.   }

答案1

得分: 0

以下是您要翻译的代码部分：

  1. p {
  2.   border: 1px solid black;
  3.   margin: 2rem 0;
  4.   padding: 1rem 2rem;
  5.   display: flex;
  6.   align-items: center;
  7.   border-radius: 10px;
  8. }
  10. a {
  11.   padding: 1rem 2rem;
  12.   border: 1px solid black;
  13.   text-decoration: none;
  14.   margin: 1rem;
  15.   border-radius: 10px;
  16. }
  18. .inline-block-buttons a {
  19.   margin-left: auto;
  20. }
  22. body {
  23.   margin: 2rem;
  24.   flex-direction: column;
  25.   font-weight: bold;
  26. }
  28. @media (max-width: 500px) {
  29.   .inline-block-buttons {
  30.     flex-direction: column;
  31.   }
  32.   .inline-block-buttons a {
  33.     margin: 1rem;
  34.   }
  35. }
  1. <body>
  2.   <p class="inline-block-buttons">
  3.     Text 1
  4.     <a>Text 2</a>
  5.   </p>
  6. </body>
英文:

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

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

  1. p {
  2.   border: 1px solid black;
  3.   margin: 2rem 0;
  4.   padding: 1rem 2rem;
  5.   display:flex;
  6.   align-items: center;
  7.   border-radius: 10px;
  8. }
  10. a {
  11.   padding: 1rem 2rem;
  12.   border: 1px solid black;
  13.   text-decoration: none;
  14.   margin: 1rem;
  15.   border-radius: 10px;
  16. }
  18. .inline-block-buttons a {
  19.   margin-left: auto;
  20. }
  22. body {
  23.   margin: 2rem;
  24.   flex-direction: column;
  25.   font-weight: bold;
  26. }
  27. @media (max-width: 500px) {
  28.   .inline-block-buttons {
  29.     flex-direction: column;
  30.   }
  31.   .inline-block-buttons a{
  32.     margin: 1rem;
  33.   }
  34. }

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

  1. &lt;body&gt;
  2. &lt;p class=&quot;inline-block-buttons&quot;&gt;
  3.   Text 1
  4.   &lt;a&gt;Text 2&lt;/a&gt;
  5. &lt;/p&gt;
  6. &lt;/body&gt;

<!-- end snippet -->

答案2

得分: 0

以下是您要翻译的内容：

  1. 尝试这个：
  3. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  5. <!-- 语言：lang-css -->
  6. div.inline-block-buttons {
  7.     display: flex;
  8.     justify-content: space-between;
  9.     padding: 30px;
  10.     flex-wrap: wrap;
  11. }
  13. .inline-block-buttons {
  14.     border: 1px solid black;
  15.     border-radius: 10px;
  16.     padding: 15px 100px;
  17. }
  19. @media (max-width: 500px) {
  20.   .inline-block-buttons {
  21.     flex-direction: column;
  22.     text-align: center;
  23.   }
  24.   .inline-block-buttons p {
  25.     margin-bottom: 50px;
  26.   }
  27. }
  29. <!-- 语言：lang-html -->
  30.  <div class="inline-block-buttons">
  31.         <p>Text 1</p>
  32.         <a class="inline-block-buttons">Text 2</a>
  33.  </div>
  35. <!-- 结束代码片段 -->

请注意，我已经保留了代码部分的原始标记，以便您可以在需要时使用它们。

英文:

Try this :

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

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

  1. div.inline-block-buttons {
  2.     display: flex;
  3.     justify-content: space-between;
  4.     padding: 30px;
  5.     flex-wrap: wrap;
  6. }
  8. .inline-block-buttons {
  9.     border: 1px solid black;
  10.     border-radius: 10px;
  11.     padding: 15px 100px;
  12. }
  15. @media (max-width: 500px) {
  16.   .inline-block-buttons {
  17.     flex-direction: column;
  18.     text-align: center;
  19.   }
  20.   .inline-block-buttons p {
  21.     margin-bottom: 50px;
  22.   }
  23. }

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

  1.  &lt;div class=&quot;inline-block-buttons&quot;&gt;
  2.         &lt;p&gt;Text 1&lt;/p&gt;
  3.         &lt;a class=&quot;inline-block-buttons&quot;&gt;Text 2&lt;/a&gt;
  4.  &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 20:43:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76506744.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

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

确定