垂直将一个元素平移，使其新位置位于另外两个元素之间？

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

How to vertically translate an element so its new position is between two other elements?

问题

给定一个标题元素和一个主内容元素，我想在它们之间（垂直方向）添加一个条形块，如下所示：

  1. <div id="header">header</div>
  2. <div id="bar">bar</div>
  3. <div id="main-content">main content</div>

应该变成这样（为简化起见，我去掉了绿色块的一些水平空间）：

垂直将一个元素平移，使其新位置位于另外两个元素之间？

我尝试了以下方法：

  1. #header {
  2.   background: yellow;
  3.   height: 50px;
  4. }
  6. #bar-container {
  7.   position: relative;
  8.   background: green;
  9.   height: 50px;
  10.   margin: 0 50px;
  11. }
  13. #bar {
  14.   position: absolute;
  15.   top: 50%;
  16.   transform: translateY(-50%);
  17. }
  19. #main-content {
  20.   background: blue;
  21.   height: 50px;
  22. }

但这是错误的。我该如何让主内容向上移动，使条形块位于标题和主内容之间？

英文:

Given a header element and a main content element, I want to add a bar between these two ( vertically ) so this

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

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

  1. #header {
  2.   background: yellow;
  3.   height: 50px;
  4. }
  6. #bar {
  7.   background: green;
  8.   height: 50px;
  9. }
  11. #main-content {
  12.   background: blue;
  13.   height: 50px;
  14. }

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

  1. &lt;div id=&quot;header&quot;&gt;header&lt;/div&gt;
  2. &lt;div id=&quot;bar&quot;&gt;bar&lt;/div&gt;
  3. &lt;div id=&quot;main-content&quot;&gt;main content&lt;/div&gt;

<!-- end snippet -->

should become this ( I removed some horizontal space from the green block for the sake of simplicity )

垂直将一个元素平移，使其新位置位于另外两个元素之间？

I tried the following

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

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

  1. #header {
  2.   background: yellow;
  3.   height: 50px;
  4. }
  6. #bar-container {
  7.   position: relative;
  8.   background: green;
  9.   height: 50px;
  10.   margin: 0 50px;
  11. }
  13. #bar {
  14.   position: absolute;
  15.   top: 50%;
  16.   transform: translateY(-50%);
  17. }
  19. #main-content {
  20.   background: blue;
  21.   height: 50px;
  22. }

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

  1. &lt;div id=&quot;header&quot;&gt;header&lt;/div&gt;
  2. &lt;div id=&quot;bar-container&quot;&gt;
  3.   &lt;div id=&quot;bar&quot;&gt;bar&lt;/div&gt;
  4. &lt;/div&gt;
  5. &lt;div id=&quot;main-content&quot;&gt;main-content&lt;/div&gt;

<!-- end snippet -->

which is wrong. How can I tell the main content to move up so the bar is between the header and the main content?

答案1

得分: 2

将条形容器的高度设置为0，并将其内容居中。

  1. #bar-container {
  2.   height: 0; /* 0 高度 */
  3.   /* 垂直居中 */
  4.   display: flex;
  5.   align-items: center;
  6.   /**/
  7. }

请注意，上述内容是CSS代码，用于描述如何将条形容器的高度设置为0并将其内容居中。不包括HTML或JavaScript部分。

英文:

Give the bar container a height equal to 0 and center its content

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

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

  1. #header {
  2.   background: yellow;
  3.   height: 50px;
  4.   padding: 30px 0;
  5. }
  7. #bar-container {
  8.   height: 0; /* 0 height */
  9.   /* center vertically */
  10.   display: flex;
  11.   align-items: center;
  12.   /**/
  13. }
  15. #bar {
  16.   height: 50px;
  17.   width: 80%; 
  18.   margin-inline: auto; /* center horizontally */
  19.   background: green;
  20. }
  22. #main-content {
  23.   background: blue;
  24.   height: 50px;
  25.   padding: 30px 0;
  26. }

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

  1. &lt;div id=&quot;header&quot;&gt;header&lt;/div&gt;
  2. &lt;div id=&quot;bar-container&quot;&gt;
  3.   &lt;div id=&quot;bar&quot;&gt;bar&lt;/div&gt;
  4. &lt;/div&gt;
  5. &lt;div id=&quot;main-content&quot;&gt;main-content&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

option1:

  1. <div id="header">header</div>
  2. <div id="bar">bar</div>
  3. <div id="main-content">main content</div>

option 2:

  1. <div id="header">header</div>
  2. <div id="bar">bar</div>
  3. <div id="main-content">main content</div>
英文:

Two other approaches with grid:

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

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

  1. div {
  2.   min-height: 50px; /*all divs at least 50px*/
  3. }
  5. #header {
  6.   background: yellow;
  7.   grid-area: 1 / 1; /*overlap header and bar*/
  8. }
  10. #bar {
  11.   background: green;
  12.   grid-area: 1 / 1; /*overlap header and bar*/
  13.   margin: 0 4rem; /*margin to bring in sides of bar*/
  14.   transform: translateY(50%); /*translate on the Y axis*/
  15. }
  17. #main-content {
  18.   background: blue;
  19. }
  21. body {
  22.   display: grid; /*use grid on parent*/
  23.   grid-template-rows: min-content 1fr; /*2 grid rows*/
  24.   
  25.   margin: 0;
  26.   height: 100%;
  27. }
  29. html {
  30.   height: 100%;
  31. }

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

  1. &lt;div id=&quot;header&quot;&gt;header&lt;/div&gt;
  2. &lt;div id=&quot;bar&quot;&gt;bar&lt;/div&gt;
  3. &lt;div id=&quot;main-content&quot;&gt;main content&lt;/div&gt;

<!-- end snippet -->

option 2:

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

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

  1. div {
  2.   min-height: 50px; /*all divs at least 50px*/
  3. }
  5. #header {
  6.   background: yellow;
  7. }
  9. #bar {
  10.   background: green;
  11.   position: absolute; /*remove bar from document flow*/
  12.   inset: 25px 25px auto; /*position bar 25px from top/right/left*/
  13. }
  15. #main-content {
  16.   background: blue;
  17. }
  19. body {
  20.   display: grid; /*use grid on parent*/
  21.   grid-template-rows: min-content 1fr; /*2 grid rows*/
  22.   position: relative; /*use relative on parent*/
  23.   
  24.   margin: 0;
  25.   height: 100%;
  26. }
  28. html {
  29.   height: 100%;
  30. }

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

  1. &lt;div id=&quot;header&quot;&gt;header&lt;/div&gt;
  2. &lt;div id=&quot;bar&quot;&gt;bar&lt;/div&gt;
  3. &lt;div id=&quot;main-content&quot;&gt;main content&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月29日 18:43:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76356660.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定