首页 > 解决方案 > 如何将 div 彼此相邻放置,在其他两个 div 之间保持 100% 的宽度

问题描述

我想用左右箭头滚动,然后我单击中心 div 中的左箭头或右箭头内容将向左或向右移动。

但是现在中心 div 正在将右箭头移动到可见区域之外,无论父宽度如何(响应式),如何保持中心 div 的固定宽度。具有固定宽度的箭头。只有 sizeof center div 改变。

<div class="border-faded" style="display: flex; height:50px; width:100%; background-color: #f8f9fb; overflow-y: hidden; overflow-x: hidden">
  <div class="scrollleft" style="width:50px; float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div>
  <div id="scrollBar" class="w-100" style="float: left; white-space: nowrap">
    xfxgggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
  <div class="scrollright" style="width: 50px; float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div>
</div>

标签: htmlcss

解决方案


推荐阅读