【问题标题】:Spacing between antd Image components in ReactReact 中 antd Image 组件之间的间距
【发布时间】:2021-11-16 11:17:21
【问题描述】:

我正在使用 antd 的 Image 组件,因为我想要它具有的预览功能,但是当我尝试在我的图像之间添加一些空间时,样式没有生效。它们只是堆叠在一起,没有空间。当我使用<img> 标签时,同样的事情也有效。有关如何解决此问题的任何见解?

<div>
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
</div>

【问题讨论】:

    标签: reactjs antd


    【解决方案1】:

    您可以利用 AntD 的 Space 组件。

    <Space size={15}>
      <Image src={image} />
      <Image src={image} />
      <Image src={image} />
    </Space>
    

    【讨论】:

      【解决方案2】:

      根据Image 组件API,该组件不采用 style 属性。

      我建议使用包装器组件来应用margin-right: 15px; 规则。

      <div>
        <div style={{marginRight: "15px"}}>
          <Image src={image} />
        </div>
        <div style={{marginRight: "15px"}}>
          <Image src={image} />
        </div>
        <div style={{marginRight: "15px"}}>
          <Image src={image} />
        </div>
      </div>
      

      【讨论】:

        猜你喜欢
        • 2019-11-08
        • 1970-01-01
        • 2022-01-17
        • 2021-01-29
        • 1970-01-01
        • 2020-11-30
        • 1970-01-01
        • 2018-01-12
        • 2015-03-17
        相关资源
        最近更新 更多