Tailwind：父元素动态适应子元素高度

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

Tailwind: Parent dynamically fit child height

问题

  1. 我有一个图像作为页眉，还有文本和按钮需要显示在页眉图像的顶部。我想要实现的目标是，在小型媒体屏幕上，我希望将图像页眉的高度相应地更改为文本以及按钮的高度。
  3. 基本上这是我在这里尝试实现的内容。（来自另一个示例网站）：
  5. [![来自另一个网站的示例][1]][1]
  7. 但是我的代码给我这个结果：
  8. [![在此输入图像描述][2]][2]
  10.   [1]: https://i.stack.imgur.com/xyzs6.png
  11.   [2]: https://i.stack.imgur.com/DhAja.jpg
  13. ```jsx
  14. const styles = {
  15.    backgroundImage: `url(${banner})`,
  16.    backgroundSize: 'cover',
  17.    backgroundPosition: 'right',
  18. };
  19. <section className="container-banner relative">
  20.     <div className='gambar h-[50vh]' style={styles}>
  21.         <div className='absolute inset-0 bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
  23.             <div className="flex absolute top-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:top-44">
  24.                 <div className='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
  25.                     <h1 className='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight'>Pakar dalam merealisasikan perabot impian anda.</h1>
  26.                     <p className='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
  27.                     <a href="/contact-us"><button className='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150'>联系我们 <FontAwesomeIcon icon={faAngleRight} className='text-base group-hover:translate-x-1 duration-150' /></button></a>
  28.                 </div>
  29.                 <div className='w-0 bg-red md:flex-1'></div>
  30.             </div>
  32.         </div>
  33.     </div>
  34. </section>

我尝试过的一些试错方法是将minHeight和maxHeight添加到100％，但这并不起作用。顺便说一下，忽略了混乱的Tailwind媒体查询，因为我仍然在学习响应式设计的过程中。请帮帮我！

  2. <details>
  3. <summary>英文:</summary>
  5. I have an image as the header and text as well as button that need to appear on top of the header image. What i want to achieve is, in the small media screen, i want to make the height of image header change accordingly to the height of the text as well as the button.
  7. This is basically what I try to achieve here. (Taken from an example site):
  9. [![Example taken from another site][1]][1]
  13. But my code below give me this:
  14. [![enter image description here][2]][2]
  17.   [1]: https://i.stack.imgur.com/xyzs6.png
  18.   [2]: https://i.stack.imgur.com/DhAja.jpg
  20.         const styles = {
  21.            backgroundImage: `url(${banner})`,
  22.            backgroundSize: &#39;cover&#39;,
  23.            backgroundPosition: &#39;right&#39;,
  24.         };
  25.     &lt;section className=&quot;container-banner relative&quot;&gt;
  26.                 &lt;div className=&#39;gambar h-[50vh]&#39; style={styles} &gt;
  27.                     &lt;div className=&#39;absolute inset-0 bg-gray-700 bg-opacity-60 md:bg-opacity-0&#39;&gt;
  29.                         &lt;div className=&quot;flex absolute top-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:top-44&quot;&gt;
  30.                             &lt;div className=&#39;flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto&#39;&gt;
  31.                                 &lt;h1 className=&#39;text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight &#39;&gt;Pakar dalam merealisasikan perabot impian anda.&lt;/h1&gt;
  32.                                 &lt;p className=&#39;mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl&#39;&gt;Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!&lt;/p&gt;
  33.                                 &lt;a href=&quot;/contact-us&quot;&gt;&lt;button className=&#39;group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150&#39;&gt;Contact Us &lt;FontAwesomeIcon icon={faAngleRight} className=&#39;text-base group-hover:translate-x-1 duration-150&#39; /&gt;&lt;/button&gt;&lt;/a&gt;
  34.                             &lt;/div&gt;
  35.                             &lt;div className=&#39;w-0 bg-red md:flex-1&#39;&gt;&lt;/div&gt;
  36.                         &lt;/div&gt;
  38.                     &lt;/div&gt;
  39.                 &lt;/div&gt;
  40.             &lt;/section&gt;
  42. Some try and error method i have tried is add minHeight and maxHeight to 100%, but it doesn&#39;t work. Btw, please ignore the messy tailwind media query since i&#39;m still in the learning process of the responsive. Please help me! 
  44. </details>
  47. # 答案1
  48. **得分**: 1
  50. 请不要使用 `position: absolute`。不使用 `position: absolute`，元素将位于布局流中，具有背景的 `<div>` 可以根据其内部内容调整其高度。
  52. ```html
  53. <script src="https://cdn.tailwindcss.com"></script>
  55. <section class="container-banner relative">
  56.   <div class='gambar' style="background-image: url(https://picsum.photos/1000/1000); background-size: cover; background-position: right">
  57.     <div class='bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
  59.       <div class="relative flex pt-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:pt-44">
  60.         <div class='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
  61.           <h1 class='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight '>Pakar dalam merealisasikan perabot impian anda.</h1>
  62.           <p class='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
  63.           <a href="/contact-us"><button class='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover-bg-ascent-dark duration-150'>Contact Us <FontAwesomeIcon icon={faAngleRight} class='text-base group-hover-translate-x-1 duration-150'>FontAwesomeIcon</FontAwesomeIcon></button></a>
  64.         </div>
  65.         <div class='w-0 bg-red md:flex-1'></div>
  66.       </div>
  68.     </div>
  69.   </div>
  70. </section>
英文:

Consider not using position: absolute. By not using position: absolute, the element would be within the layout flow and the &lt;div&gt; with the background can adjust its height to its inner content.

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

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

  1. &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  3. &lt;section class=&quot;container-banner relative&quot;&gt;
  4.   &lt;div class=&#39;gambar&#39; style=&quot;background-image: url(https://picsum.photos/1000/1000); background-size: cover; background-position: right&quot;&gt;
  5.     &lt;div class=&#39;bg-gray-700 bg-opacity-60 md:bg-opacity-0&#39;&gt;
  7.       &lt;div class=&quot;relative flex pt-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:pt-44&quot;&gt;
  8.         &lt;div class=&#39;flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto&#39;&gt;
  9.           &lt;h1 class=&#39;text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight &#39;&gt;Pakar dalam merealisasikan perabot impian anda.&lt;/h1&gt;
  10.           &lt;p class=&#39;mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl&#39;&gt;Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!&lt;/p&gt;
  11.           &lt;a href=&quot;/contact-us&quot;&gt;&lt;button class=&#39;group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150&#39;&gt;Contact Us &lt;FontAwesomeIcon icon={faAngleRight} class=&#39;text-base group-hover:translate-x-1 duration-150&#39;&gt;FontAwesomeIcon&lt;/FontAwesomeIcon&gt;&lt;/button&gt;&lt;/a&gt;
  12.         &lt;/div&gt;
  13.         &lt;div class=&#39;w-0 bg-red md:flex-1&#39;&gt;&lt;/div&gt;
  14.       &lt;/div&gt;
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18. &lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月1日 13:23:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76378864.html
  • html
  • reactjs
  • tailwind-css
匿名

发表评论

匿名网友

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

确定