我正在尝试设计我的图片库，以便“下一个”和“上一个”按钮将位于侧面，而展开的按钮将位于角落，并动态地保持在它们的位置，这就是我目前得到的结果
这是我的代码结构
<div className="container">
<i className="fa-solid fa-expand" />
<div className="left-arrow" onClick={goPrevious}>❰</div>
<img className="gallery-images" src={${photos[currentIndex].url}} alt="" />
<div className="right-arrow" onClick={goNext}>❱</div>
<div className="dot-container"> {photos.map((photo, index) => ( <div className="dot" key={index} onClick={()=> goToPhoto(index)}> ● </div> ))}
</div>
</div>
1条答案
按热度按时间4smxwvx51#
MDN上的这些文章将帮助您开始使用所需的CSS：
我建议相对于其父容器放置展开按钮，更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/position
如果您将父容器设置为Flexbox，则箭头应位于图像的左侧和右侧，更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
如果您需要进一步的帮助，请提供一个CSS代码剪。