Question

我正在尝试在一行中构建3个div

左右div包含一个大小为35px的图像。中间div包含许多其他具有水平滚动的div

左（35px）中（不是固定宽度，水平滚动）右（35px）

<div class="wrapper">
 <div>
 left
 <div>

 <div>
   <div> .... </div>
   <div> .... </div>
   <div> .... </div>
   ....
 </div>

 <div>
 Right
 </div>

</div>

我尝试了很多，但仍然无法做到这一点。任何帮助将不胜感激

修改

这不是响应式设计。中间div应该占据行中的空间。

左右div总是固定宽度。在这种情况下，两者都设置为35px;

Answer 1

当您使用浮动时，您需要设置宽度才能使其正常工作。

.middle {
  height: 100%;
  width: 80%; /* Width is important for floats. */
  float: left;
  overflow: scroll; /* Allow scroll */
  white-space: nowrap; /* This will create the magic for the horizontal scroll */
}

.middleInner{
  display: inline-block; /* No float needed for inner elements */ 
}

JSFiddle here

div的水平滚动包含其他div

1 个答案: