Element not following CSS grid

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

Element not following CSS grid

问题

以下是翻译好的部分：

我正在使用网格布局，并希望以下内容位于底部和中心，但它们出现在左侧：

  1. .body {
  2.   margin: 0;
  3.   background-color: rgb(255, 237, 237);
  4.   display: grid;
  5.   grid-template-rows: 10vh 48vh 21vh 21vh;
  6.   grid-template-columns: 98vi;
  7.   color: white;
  8. }
  10. #scrolllabel {
  11.   color: rgb(19, 1, 1);
  12.   grid-row: 3;
  13.   grid-column: 1;
  14.   z-index: 100;
  15.   font-family: Arial;
  16.   place-content: center;
  17.   place-self: center;
  18.   align-self: center;
  19.   font-size: 25px;
  20.   border-width: 0;
  21. }
  1. <h2 id="scrolllabel">Scroll down to know more</h2>
  2. <b id="the_down_arrow">&darr;</b>

但结果是：

Element not following CSS grid

英文:

I'm using gridding and want the following to be bottom and center but they are appearing at the left:

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

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

  1. .body {
  2.   margin: 0;
  3.   background-color: rgb(255, 237, 237);
  4.   display: grid;
  5.   grid-template-rows: 10vh 48vh 21vh 21vh;
  6.   grid-template-columns: 98vi;
  7.   color: white;
  8. }
  10. #scrolllabel {
  11.   color: rgb(19, 1, 1);
  12.   grid-row: 3;
  13.   grid-column: 1;
  14.   z-index: 100;
  15.   font-family: Arial;
  16.   place-content: center;
  17.   place-self: center;
  18.   align-self: center;
  19.   font-size: 25px;
  20.   border-width: 0;
  21. }

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

  1. &lt;h2 id=&quot;scrolllabel&quot;&gt;Scroll down to know more&lt;/h2&gt;
  2. &lt;b id=&quot;the_down_arrow&quot;&gt;&amp;darr;&lt;/b&gt;

<!-- end snippet -->

but the result is:

Element not following CSS grid

答案1

得分: 1

You can use position属性而不是grid。

------ HTML---------

  1. <div class="hero-container">
  2.     <div>
  3.         <h2 id="scrolllabel">向下滚动了解更多</h2>
  4.         <b id="the_down_arrow">&darr;</b>
  5.     </div>
  6. </div>

------ Style ------

  1. .hero-container {
  2.     height: 500px; /*根据您的需求*/
  3.     width: 100%;
  4.     background-color: lightskyblue;
  6.     position: relative; /*重要*/
  7. }
  8. .hero-container > div {
  9.     position: absolute; /*重要*/
  10.     bottom: 10px; /*根据您的需求*/
  12.     /*对齐最重要的部分*/
  13.     display: flex;
  14.     flex-direction: column;
  15.     justify-content: center;
  16.     align-items: center;
  17.     width: 100%;
  19. }

尝试将此代码应用到您的应用程序中。

英文:

Element not following CSS gridYou can use position attribute instead of grid.

------ HTML---------

  1. &lt;div class=&quot;hero-container&quot;&gt;
  2. 	&lt;div &gt;
  3. 		&lt;h2 id=&quot;scrolllabel&quot; &gt;Scroll down to know more&lt;/h2&gt;
  4. 		&lt;b id=&quot;the_down_arrow&quot;&gt;&amp;darr;&lt;/b&gt;
  5. 	&lt;/div&gt;
  6. &lt;/div&gt;

------ Style ------

  1. .hero-container {
  2. 	height: 500px; /*as per your requirement*/
  3. 	width: 100%;
  4. 	background-color: lightskyblue;
  6. 	position: relative; /*Important*/
  7. }
  8. .hero-container &gt; div {
  9. 	position: absolute; /*Important*/
  10. 	bottom: 10px; /*as per your requirement*/
  12. 	/*Most important to align*/
  13. 	display: flex;
  14. 	flex-direction: column;
  15. 	justify-content: center;
  16. 	align-items: center;
  17. 	width: 100%;
  19. }

Try this code to your app.

答案2

得分: 0

请尝试以下代码。我现在有点忙，所以只分享了代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>测试</title>
  8.     <style type="text/css">
  9.         .body {
  10.           margin: 0;
  11.           background-color: rgb(255, 237, 237);
  12.           display: grid;
  13.           grid-template-rows: 10vh 48vh 21vh 21vh;
  14.           grid-template-columns: 98vi;
  15.           color: white;
  16.         }
  17.         .hero-container{
  18.             display: grid;
  19.         }
  21.         #scrolllabel {
  22.           color: rgb(19, 1, 1);
  23.           grid-row: 3;
  24.           grid-column: 1;
  25.           z-index: 100;
  26.           font-family: Arial;
  27.           place-content: center;
  28.           place-self: center;
  29.           align-self: center;
  30.           font-size: 25px;
  31.           border-width: 0;
  32.         }
  33.         #the_down_arrow {
  34.         color: rgb(19, 1, 1);
  35.           grid-row: 4;
  36.           grid-column: 1;
  37.           z-index: 100;
  38.           font-family: Arial;
  39.           place-content: center;
  40.           place-self: center;
  41.           align-self: center;
  42.           font-size: 25px;
  43.           border-width: 0;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="hero-container">
  49.         <h2 id="scrolllabel" >向下滚动了解更多</h2>
  50.         <b id="the_down_arrow">&darr;</b>
  51.     </div>
  52. </body>
  53. </html>
英文:

Try this code please. I am little busy now, so I shared code only.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. 	&lt;meta charset=&quot;utf-8&quot;&gt;
  5. 	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. 	&lt;title&gt;Test&lt;/title&gt;
  8. 	&lt;style type=&quot;text/css&quot;&gt;
  9. 		.body {
  10. 		  margin: 0;
  11. 		  background-color: rgb(255, 237, 237);
  12. 		  display: grid;
  13. 		  grid-template-rows: 10vh 48vh 21vh 21vh;
  14. 		  grid-template-columns: 98vi;
  15. 		  color: white;
  16. 		}
  17. 		.hero-container{
  18. 			display: grid;
  19. 		}
  21. 		#scrolllabel {
  22. 		  color: rgb(19, 1, 1);
  23. 		  grid-row: 3;
  24. 		  grid-column: 1;
  25. 		  z-index: 100;
  26. 		  font-family: Arial;
  27. 		  place-content: center;
  28. 		  place-self: center;
  29. 		  align-self: center;
  30. 		  font-size: 25px;
  31. 		  border-width: 0;
  32. 		}
  33. 		#the_down_arrow {
  34. 		color: rgb(19, 1, 1);
  35. 		  grid-row: 4;
  36. 		  grid-column: 1;
  37. 		  z-index: 100;
  38. 		  font-family: Arial;
  39. 		  place-content: center;
  40. 		  place-self: center;
  41. 		  align-self: center;
  42. 		  font-size: 25px;
  43. 		  border-width: 0;
  44. 		}
  45. 	&lt;/style&gt;
  46. &lt;/head&gt;
  47. &lt;body&gt;
  48. 	&lt;div class=&quot;hero-container&quot;&gt;
  49. 		&lt;h2 id=&quot;scrolllabel&quot; &gt;Scroll down to know more&lt;/h2&gt;
  50. 		&lt;b id=&quot;the_down_arrow&quot;&gt;&amp;darr;&lt;/b&gt;
  51. 	&lt;/div&gt;
  52. &lt;/body&gt;
  53. &lt;/html&gt;

答案3

得分: 0

尝试将其放入一个容器并使用 flexbox。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>order</title>
  8.   <style>
  9.     .body {
  10.       margin: 0;
  11.       overflow: hidden;
  12.     }
  14.     .container {
  15.       display: flex;
  16.       justify-content: center;
  17.       align-items: center;
  18.       width: 100%;
  19.       height: 100vh;
  20.       background: red;
  21.     }
  22.   </style>
  23. </head>
  24. <body>
  25.   <div class="container">
  26.     <h2 id="scrolllabel">向下滚动以了解更多</h2>
  27.     <b id="the_down_arrow">&darr;</b>
  28.   </div>
  29. </body>
  30. </html>
英文:

Try wrapping it in a container and using flexbox.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.   &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  5.   &lt;meta charset=&quot;utf-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  7.   &lt;title&gt;order&lt;/title&gt;
  8.   &lt;style&gt;
  9. .body {
  10.   margin: 0;
  11.   overflow: hidden;
  12. }
  14. .container {
  15.   display:flex;
  16.   justify-content:center;
  17.   align-items:center;
  18.   width: 100%;
  19.   height: 100vh;
  20.   background: red;
  21. }
  22.   &lt;/style&gt;
  23. &lt;/head&gt;
  24. &lt;body&gt;
  25.   &lt;div class=&quot;container&quot;&gt;
  26.   &lt;h2 id=&quot;scrolllabel&quot;&gt;Scroll down to know more&lt;/h2&gt;
  27.   &lt;b id=&quot;the_down_arrow&quot;&gt;&amp;darr;&lt;/b&gt;
  28.   &lt;/div&gt;
  29. &lt;/body&gt;
  30. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年7月23日 14:24:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76746882.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定