如何使用尾风CSS将图像对齐？

Question

我正在建立一个网站与反应广告顺风。但我在调整图像时遇到了问题：

​

我需要更小的图像在更大的图像的右边。我试过很大程度上对齐它，但我做不到。

顺风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>;
}

​

我该怎么解决？？

Answer 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>
  );
}

Answer 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>;
}

​