在div的每一侧放置两个箭头，使其具有响应能力

Question

我对遇到的问题感到非常沮丧。我的应用程序上有一个图片轮播，并且我试图在图片的两边显示两个箭头。我的整个页面布局都是使用flexbox制作的，但似乎无法使用flexbox达到所需的结果。我看到其他人也发表了类似的问题，每个人的解决方案都是使用ggplot(df, aes(y=lat, x=lon, fill=temp)) + geom_polygon(mapping=aes(long,lat,fill=data, group=id), data=ggSPolysdf) + borders('world', colour='gray50', size=.2) + coord_quickmap(xlim=range(lon), ylim=range(lat)) + scale_fill_distiller(palette='Spectral') + theme_minimal() 。我的问题是它根本没有响应。我使用的是移动优先设计，因此，只要宽度增加一点点，箭头的位置就会混乱。我将不得不进行50次媒体查询才能使其响应。

这是我的代码（由React制作）：

position: absolute

我的CSS：

<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; } 中）在移动视图中的外观。无论宽度如何，我都希望它看起来像这样

Answer 1

在.dashboard div上以默认方向row使用flexbox并调整HTML以利用流程。

.dashboard {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="dashboard">
  <div class="left_button">
    <button class="left-btn btn">Prev</button>
  </div>
  <div class="dashboard-pic">
    <img src="http://www.fillmurray.com/140/200" alt="">
  </div>
  <div class="right_button">
    <button class="right-btn btn">Next</button>
  </div>
</div>

<div class="dashboard">
  <div class="left_button">
    <button class="left-btn btn">Prev</button>
  </div>
  <div class="dashboard-pic">
    <img src="http://www.fillmurray.com/460/300" alt="">
  </div>
  <div class="right_button">
    <button class="right-btn btn">Next</button>
  </div>
</div>