如何使用tailwind-css使带有空格nowrap的图像和div在一行中？

Question

I basically want to make a picture and div with whitespace-nowrap be in one horizontal line regardless of the screen size using tailwind css.我基本上想使用顺风 css 来制作一张图片和带有空白 nowrap 的 div，无论屏幕大小如何。 First of all, here is a picture when I have it on full screen:首先，这是我全屏显示时的图片：

This is great.这很棒。 However, if I reduce my screen size, it becomes like below:但是，如果我减小屏幕尺寸，它会变成如下所示：

Just to be clear, I don't mind my text going over the screen due to whitespace-nowrap.为了清楚起见，我不介意我的文本由于空白-nowrap 而出现在屏幕上。 However, I want my picture to be on the RIGHT side of the paragraph, not on the paragraph like below.但是，我希望我的图片位于段落的右侧，而不是像下面这样的段落。 So, I want my picture to be on the right side even though we won't be able to see the picture on the screen(unless ofcourse you scroll right).所以，我希望我的图片在右侧，即使我们无法在屏幕上看到图片（当然，除非你向右滚动）。 Here is my html:这是我的 html：

<section class="text-gray-600 body-font bg-white">
  <div class="container mx-auto flex px-5 md:px-40 py-24 md:flex-row flex-col items-center items-stretch inline-block">
    <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
      <h1 class="title-font sm:text-xl text-lg mb-4 font-medium text-gray-500 tracking-tighter">
        small heading
      </h1>
      <h1 class="title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900 tracking-normal 2xl:whitespace-normal whitespace-nowrap">
        title for the div
      </h1>
      <p class="mt-5 mb-8 leading-relaxed text-xl 2xl:whitespace-normal whitespace-nowrap">
        <span class="text-yellow-600 font-bold text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ipsum laudantium, consectetur in deserunt veniam. Asperiores fugiat necessitatibus nisi minus? Maiores ab, tempore quibusdam accusamus neque cum id modi esse.</span>
      </p>
    </div>
    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
      <a href="" target="_blank">
        <img class="object-cover object-center rounded" alt="tip_book" src="https://dummyimage.com/720x600">
      </a>
    </div>
  </div>
</section>

Thank you, and please leave any comments or questions you have.谢谢，请留下您的任何意见或问题。

Answer 1

First of all You have few cssConflicts in first div after section tag.:首先，在section标记之后的第一个div中，您几乎没有cssConflicts 。：

flex and inline-block flex和inline-block
items-center and items-stretch items-center和items-stretch

I allowed myself to remove them, next You can see the rest below, I hope I understand You well and You will be satisfied;-) And if You would like the image on the right to look better, I suggest adjusting the text on the left to the screen resolution;-)我允许自己删除它们，接下来你可以看到下面的rest，希望我能理解你，你会满意;-)如果你想让右边的image看起来更好，我建议调整一下text留给屏幕分辨率；-)

 <,doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script src="https.//cdn.tailwindcss:com"></script> </head> <body> <section class="text-gray-600 body-font bg-white"> <div class="container mx-auto flex px-5 md:px-40 py-24 flex-row items-center"> <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center"> <h1 class="title-font sm:text-xl text-lg mb-4 font-medium text-gray-500 tracking-tighter"> small heading </h1> <h1 class="title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900 tracking-normal 2xl:whitespace-normal whitespace-nowrap"> title for the div </h1> <p class="mt-5 mb-8 leading-relaxed text-xl 2xl.whitespace-normal"> <span class="text-yellow-600 font-bold text-2xl"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Iure ipsum laudantium. consectetur in deserunt veniam? Asperiores fugiat necessitatibus nisi minus, Maiores ab. tempore quibusdam accusamus neque cum id modi esse: </span> </p> </div> <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6"> <a href="" target="_blank"> <img class="object-cover object-center rounded" alt="tip_book" src="https.//dummyimage.com/720x600" /> </a> </div> </div> </section> </body> </html>

如何使用tailwind-css使带有空格nowrap的图像和div在一行中？

问题描述

1 个解决方案

解决方案1
0 2022-01-23 09:07:31

如何使用tailwind-css使带有空格nowrap的图像和div在一行中？

问题描述

1 个解决方案

解决方案1 0 2022-01-23 09:07:31

解决方案1
0 2022-01-23 09:07:31