如何使用 Tailwind CSS 将图像与图像右对齐？答案

【问题标题】：How to align an image right to an image using Tailwind CSS?如何使用 Tailwind CSS 将图像与图像右对齐？
【发布时间】：2022-01-30 15:19:04
【问题描述】：

我正在建立一个带有反应广告顺风的网站。但我在对齐图像时遇到问题：

我需要较小的图像位于较大图像的右侧。我尝试了很多以将其对齐，但我做不到。这是我的代码

顺风 CSS：

.banner-image {
  @apply   flex mt-24 ml-10 w-max rounded-lg
}
.side-image{
  @apply flex mt-24 ml-10 float-right w-48 rounded-lg mr-96
}

反应：

function Banner() {
  return <div >
    <div>
      <img className='banner-image' src="https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
    <div>
      <img className='side-image' src="https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
  </div>;
}

我该如何解决？？

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

删除float-right 类。

.banner-image {
  @apply flex mt-24 ml-10 w-max rounded-lg;
}
.side-image {
  @apply flex mt-24 ml-10 w-48 rounded-lg mr-96;
}

将flex 类添加到div 包装器。

function Banner() {
  return (
    <div className='flex'>
      <div>
        <img
          className='banner-image'
          src='https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
      <div>
        <img
          className='side-image'
          src='https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
    </div>
  );
}

【讨论】：

【解决方案2】：

嗯...在您的代码中，每个图像都有两个不同的类，并且您希望它们位于一行中，因为您需要将两个图像插入一个容器中，然后设置它们的样式。这样就解决了。

function Banner() {
  return <div >
    <
    div >
    <
    img className = 'side-image'
  src = "https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
  alt = "" / >

    <
    img className = 'banner-image'
  src = "https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
  alt = "" / >
    <
    /div> <
    /div>;
}

【讨论】：