在页面调整大小时，在flexbox中将标题与图像对齐

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

align title over images in flexbox when page resized

问题

我想在一个flexbox内的图像列表上有4个链接，但当我调整页面大小时，链接穿过图像，我认为这是因为图像和链接不是“相关的”，因此它们之间的填充和边距不起作用，但我不知道如何修复它。我猜我必须为它们都添加特定的position命令来使它们相关，但我不知道如何。

  1. <!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->
  3. <!-- 语言：lang-js -->
  4. const chapter1 = [];
  5. for (let i = 1; i <= 49; i++) {
  7.     chapter1.push({ src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}` });
  8. }
  9. const chapter2 = [{ src: '../images/maps/76.jpg' }];
  10. const chapter3 = [{ src: '../images/maps/64.jpg' }];
  11. const chapter4 = [{ src: '../images/maps/98.jpg' }];
  13. // 用于显示所选章节的图像的函数
  14. function showImages(chapter) {
  16.     const img_list = document.getElementById('imageList');
  17.     img_list.replaceChildren();
  19.     // 循环遍历所选章节中的图像
  20.     chapter.forEach(image => {
  22.         const li = document.createElement('li');
  23.         const img = new Image();
  25.         img.src = image.src;
  26.         img.alt = image.alt;
  27.         li.append(img);
  29.         const span = document.createElement('span');
  30.         span.textContent = "Image";
  32.         li.append(span);
  33.         img_list.appendChild(li);
  34.     });
  35. }
  37. // 为第1章链接添加点击事件
  38. document.querySelector('#chapter1').addEventListener('click', function (e) {
  39.     e.preventDefault();
  40.     showImages(chapter1);
  41. });
  43. // 为第2章链接添加点击事件
  44. document.querySelector('#chapter2').addEventListener('click', function (e) {
  45.     e.preventDefault();
  46.     showImages(chapter2);
  47. });
  49. document.querySelector('#chapter3').addEventListener('click', function (e) {
  50.     e.preventDefault();
  51.     showImages(chapter3);
  52. });
  54. document.querySelector('#chapter4').addEventListener('click', function (e) {
  55.     e.preventDefault();
  56.     showImages(chapter4);
  57. });
  59. window.onload = function () {
  60.     document.body.style.opacity = 1
  61.     showImages(chapter1);
  62. }
  1. <!-- 语言：lang-css -->
  2. @charset "utf-8;
  3. /* CSS文档 */
  5. body {
  6.     background-image: url("../images/background-maps.jpg");
  7.     background-repeat: no-repeat;
  8.     background-size: cover;
  10.     padding: 0;
  11.     margin: 0;
  13.     opacity: 0;
  14.     transition: opacity 1s;
  15. }
  17. .menu {
  18.     background-color: rgba(255, 255, 255, 0.5);
  20.     justify-content: center;
  21.     display: flex;
  22.     margin: 0 auto;
  23.     width: 55%;
  24.     height: 100%;
  25.     padding: 10px;
  26.     position: relative;
  27. }
  29. .menu ul {
  30.     list-style-type: none;
  31.     padding: 0;
  32.     display: flex;
  33.     flex-wrap: wrap;
  34.     justify-content: space-between;
  35. }
  37. .menu li {
  38.     width: 20%;
  39.     min-width: 200px;
  40.     margin: 15px;
  41.     text-align: center;
  42. }
  44. .menu img {
  45.     width: 100%;
  46.     height: 100%;
  47.     object-fit: cover;
  48. }
  50. .menu li span {
  52.     padding: 5px;
  53. }
  55. a {
  57.     font-size: 20px;
  58.     font-weight: 200;
  59.     padding: 5px;
  61. }
  63. h1 {
  65.     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  66.     font-weight: 600;
  67.     font-size: 75px;
  68.     text-align: center;
  69.     text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
  71.     margin: auto;
  72.     padding: 5px;
  73. }
  75. .mappages {
  76.     padding: 5px;
  77.     position: absolute;
  78.     top: 8px;
  79.     left: 16px;
  80. }
  1. <!-- 语言：lang-html -->
  2. <header>
  3.     <h1>地图画廊</h1>
  4. </header>
  6. <div class="menu">
  7.     <ul id="imageList"></ul>
  8.     <div class="mappages">
  9.         <a href="#" id="chapter1">第1章</a>
  10.         <a href="#" id="chapter2">第2章</a>
  11.         <a href="#" id="chapter3">第3章</a>
  12.         <a href="#" id="chapter4">第4章</a>
  13.     </div>
  14. </div>
英文:

i want to have 4 links over a list of images inside a flexbox but when i resize the page the links go through the images, i believe its because the images and the links arent "related" and therefore padding and margin doesnt work between them, but i dont know how to fix it. im guessing i have to add specific position: commands to them both to make them related but i dont know.

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

<!-- language: lang-js -->

  1. const chapter1 = [];
  2. for (let i = 1; i &lt;= 49; i++){
  4. chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
  5. }
  6. const chapter2 = [{src: &#39;../images/maps/76.jpg&#39;}];
  7. const chapter3 = [{src: &#39;../images/maps/64.jpg&#39;}];
  8. const chapter4 = [{src: &#39;../images/maps/98.jpg&#39;}];
  10. // Function to display images for the chosen chapter
  11. function showImages(chapter) {
  12. 	
  13. 	const img_list = document.getElementById(&#39;imageList&#39;);
  14. 	img_list.replaceChildren();
  16.     // Loop through the images in the selected chapter
  17.     chapter.forEach(image =&gt; {
  18.       
  19. 		const li = document.createElement(&#39;li&#39;);
  20. 		const img = new Image();
  21. 		
  22. 		img.src= image.src;
  23. 		img.alt=image.alt;
  24. 		li.append(img);
  25. 		
  26. 		const span = document.createElement(&#39;span&#39;);
  27. 		span.textContent = &quot;Image&quot;;
  28. 		
  29. 		li.append(span);
  30. 		img_list.appendChild(li);
  31.     });
  32.   }
  34.   // Add click event to the Chapter 1 link
  35.   document.querySelector(&#39;#chapter1&#39;).addEventListener(&#39;click&#39;, function(e) {
  36.     e.preventDefault();
  37.     showImages(chapter1);
  38.   });
  40.   // Add click event to the Chapter 2 link
  41.   document.querySelector(&#39;#chapter2&#39;).addEventListener(&#39;click&#39;, function(e) {
  42.     e.preventDefault();
  43.     showImages(chapter2);
  44.   });
  46.   document.querySelector(&#39;#chapter3&#39;).addEventListener(&#39;click&#39;, function(e) {
  47.     e.preventDefault();
  48.     showImages(chapter3);
  49.   });
  51.   document.querySelector(&#39;#chapter4&#39;).addEventListener(&#39;click&#39;, function(e) {
  52.     e.preventDefault();
  53.     showImages(chapter4);
  54.   });
  56. window.onload =  function(){
  57. 	document.body.style.opacity = 1
  58. 	showImages(chapter1);
  59. }

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

  1. @charset &quot;utf-8&quot;;
  2. /* CSS Document */
  4. body {
  5. 	background-image: url(&quot;../images/background-maps.jpg&quot;);
  6. 	background-repeat: no-repeat;
  7.     background-size: cover;
  8.     
  9. 	padding:0;
  10. 	margin:0;
  12.     opacity: 0;
  13.     transition: opacity 1s;
  15.     /*animation: fadeInAnimation ease 3s;
  16.     animation-iteration-count: 1;
  17.     animation-fill-mode: forwards;*/
  18. }
  19. /*@keyframes fadeInAnimation {
  20.     0% {
  21.         opacity: 0;
  22.     }
  23.     100% {
  24.         opacity: 1;
  25.      }
  26. }*/
  30. .menu{
  31.     background-color: rgba(255,255,255,0.5);
  32.     
  33.     justify-content: center;
  34.     display: flex;
  35.     margin: 0 auto;
  36.     width:55%;
  37.     height: 100%;
  38. 	padding:10px;
  39. 	position: relative;
  41.     
  42. }
  45. .menu ul{
  46.     list-style-type: none;
  47.     padding: 0;
  48.     display: flex;
  49.     flex-wrap: wrap;
  50.     justify-content: space-between;
  51. }
  53. .menu li{
  54.     width: 20%;
  55.     min-width: 200px;
  56.     margin: 15px;
  57.     text-align: center;
  59. }
  61. .menu img{
  62.     width: 100%;
  63.     height: 100%;
  64.     object-fit: cover; 
  65. }
  67. .menu li span{
  68. 	
  69. 	padding: 5px;
  70. }
  72. a{
  73. 	
  74. 	font-size: 20px;
  75. 	font-weight: 200;
  76. 	padding:5px;
  77. 	
  78. }
  82. h1{
  83. 	
  84. 	font-family: &#39;Gill Sans&#39;, &#39;Gill Sans MT&#39;, Calibri, &#39;Trebuchet MS&#39;, sans-serif;
  85.     font-weight: 600;
  86.     font-size: 75px;
  87.     text-align: center;
  88.     text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
  90.     margin: auto;
  91. 	padding: 5px;
  92. }
  94. .mappages{
  95. 	padding: 5px;
  96. 	position: absolute;
  97. 	top: 8px;
  98. 	left: 16px;
  99. 	
  100. }

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

  1.         &lt;header&gt;
  2.             &lt;h1&gt;Map Gallery&lt;/h1&gt;
  3.         &lt;/header&gt;
  4.         
  5.         
  6.         &lt;div class=&quot;menu&quot;&gt;
  7.             &lt;ul id=&quot;imageList&quot;&gt;&lt;/ul&gt; 
  8. 			&lt;div class=&quot;mappages&quot;&gt;
  9. 				&lt;a href=&quot;#&quot; id=&quot;chapter1&quot;&gt;Chapter 1&lt;/a&gt;
  10. 				&lt;a href=&quot;#&quot; id=&quot;chapter2&quot;&gt;Chapter 2&lt;/a&gt;
  11. 				&lt;a href=&quot;#&quot; id=&quot;chapter3&quot;&gt;Chapter 3&lt;/a&gt;
  12. 				&lt;a href=&quot;#&quot; id=&quot;chapter4&quot;&gt;Chapter 4&lt;/a&gt;
  13.         	&lt;/div&gt;
  14.             
  15.         &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

  1. 把 "mappages" 放在 "imageList" 上方，并移除 "mappages" 的绝对定位。同时，需要给 "menu" 添加 "flex-wrap: wrap"。

  2. 如果你想保持元素的当前顺序，那么仍然可以使用绝对定位，但你需要给父元素 "menu" 添加至少 50-60px 的上内边距来解决重叠问题。

英文:
  1. Put "mappages" above the "imageList" and remove the absolute position from "mappages". Also you have to add "flex-wrap: wrap" to "menu".

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

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

  1. &lt;div class=&quot;menu&quot;&gt;
  2.   &lt;div class=&quot;mappages&quot;&gt;&lt;/div&gt;
  3.   &lt;ul id=&quot;imageList&quot;&gt;&lt;/ul&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

or

  1. If you want to keep the order of the elements as it's now, then you can still use absolute position but you have to add padding-top at least 50-60px to the parent's element "menu" to fix the overlapping

huangapple
  • 本文由 发表于 2023年2月8日 19:04:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/75384856.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定