如何在屏幕空间缩小时保持中间的 div 处于顶部？

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

How do I keep middle div on top when screen estate shrinks?

问题

我有三个div，并希望它们在屏幕允许的情况下排成一行，但如果不行，中间的div应该保持在顶部，左边和右边的div应该移动到它的下方。根据类似Bootstrap的问题的回答（https://stackoverflow.com/questions/38825040/how-to-push-the-middle-div-on-top-in-small-screen-in-bootstrap），看起来可以实现，但我想看到实际的CSS代码。

  1. @media (max-width: your_breakpoint_here) {
  2.   .left, .middle, .right {
  3.     width: 100%;
  4.   }
  6.   .middle {
  7.     order: -1;
  8.   }
  9. }

请将"your_breakpoint_here"替换为你希望中间div在哪个屏幕宽度以下移动到顶部的具体屏幕宽度值。

英文:

I have three divs and I would like them to be laid out in a row when the screen estate permits, but if not, the middle div should stay on top and the left and right should move below it. Given the reply to a similar question about Bootstrap (https://stackoverflow.com/questions/38825040/how-to-push-the-middle-div-on-top-in-small-screen-in-bootstrap) it looks like it is doable, but I would like to see the actual CSS for this.

  1. <div class="left">
  2. LEFT
  3. </div>
  4. <div class="middle">
  5. THIS IS A LONG TEXT
  6. </div>
  7. <div class="right">
  8. RIGHT
  9. </div>

答案1

得分: 1

以下是关于如何使用CSS Grid和媒体查询来实现此效果的实际CSS代码：

  1. .grid {
  2.   display: grid;
  3.   grid-template-areas: "middle" "left" "right";
  4. }
  6. .left {
  7.   grid-area: left;
  8. }
  10. .middle {
  11.   grid-area: middle;
  12. }
  14. .right {
  15.   grid-area: right;
  16. }
  18. @media (min-width:600px) {
  19.   .grid {
  20.     grid-template-areas: "left middle right";
  21.   }
  22. }

如果您想了解有关CSS Grid的更多信息，可以从这里开始：https://css-tricks.com/snippets/css/complete-guide-grid/

英文:

This is the actual CSS on how to do this with CSS Grid and Media Queries.

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

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

  1. .grid {
  2.   display: grid;
  3.   grid-template-areas: &quot;middle&quot; &quot;left&quot; &quot;right&quot;;
  4. }
  6. .left {
  7.   grid-area: left;
  8. }
  10. .middle {
  11.   grid-area: middle;
  12. }
  14. .right {
  15.   grid-area: right;
  16. }
  18. @media (min-width:600px) {
  19.   .grid {
  20.     grid-template-areas: &quot;left middle right&quot;;
  21.   }
  22. }

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

  1. &lt;div class=&quot;grid&quot;&gt;
  2.   &lt;div class=&quot;left&quot;&gt;
  3.     LEFT
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;middle&quot;&gt;
  6.     THIS IS A LONG TEXT
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;right&quot;&gt;
  9.     RIGHT
  10.   &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

If you want to learn about CSS Grid, this is a good place to start: https://css-tricks.com/snippets/css/complete-guide-grid/

huangapple
  • 本文由 发表于 2023年5月13日 20:50:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76242826.html
  • css
  • html
  • layout
匿名

发表评论

匿名网友

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

确定