Html 在div的每一侧放置两个箭头，使其响应

我对我遇到的一个问题感到非常沮丧。我在我的应用程序上有一个图片旋转木马，我正试图在图片的任一侧得到两个箭头。我的整个页面布局都是使用flexbox制作的，但似乎我无法使用flexbox来实现我想要的结果。我见过其他人提出类似的问题，每个人的解决方案都是使用

position:absolute

。我的问题是它根本没有反应。我使用的是移动优先设计，所以只要宽度增加一点点，箭头的位置就会被弄乱。我需要50个媒体查询才能做出回应

以下是我的代码（由React生成）：

这就是它现在在移动视图中的外观（位置：绝对）。我想让它看起来像这样，不管它有多宽

---

使用

.dashboard

div上的flexbox，默认方向为

行

，并调整HTML以利用该流

.dashboard{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

上
下一个
上
下一个

Why

flex direction:column

位于

.dashboard

div上？我们可以更改HTML吗？@Paulie\u D是的，我们可以更改HTML。是的，谢谢你，这非常有效！我想我把我的很多部门弄糊涂了，一旦我重新安排了它们，这就奏效了。

<div className="dashboard">

   <div className="left-right-btn">
     <div className='left_button'>
     <button className="left-btn btn" onClick={this.prevPicture}>{'<'} 
 </button>
     </div>

     <div className='right_button'>
     <button className="right-btn btn" onClick={this.nextPicture}>{'>'} 
 </button>
     </div>
   </div>

   <div className="dashboard-pic">
     <div className="picture-name">{userName}</div>

     <div className="picture-carousel">    
        <Link to={`/profile/${userId}`}><img src={userPic} alt=''/></Link>
     </div>

     <div className='eventify_link_button'>
        {this.renderEventifyButton()}
     </div>
   </div>
</div>

.dashboard {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 30px;
}

.dashboard-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 5%;
}

.picture-carousel {
    min-width:L 0;
    margin: 5px;
}

.picture-carousel img {
   width:300px;
   max-width: 100%;
   max-height: 300px
}

.left-right-btn {
    position: relative;
}

.left_button {
    position: absolute;
    left: -140px;
    top: 14em;
}

.right_button{
    position: absolute;
    right: -140px;
    top: 14em;
}