Question

我正在尝试解决水平滚动页面的问题。在简化的场景中，我有一行和两列。当我滚动时，我想保持左列固定。这是我的 Fiddle

和代码：

<div class="row">
  <div class="col-xs-2" style="border-style:solid;background-color: #fff;">123456</div>
  <div class="col-xs-10" style="border-style:solid">abcde</div>
</div>

当您使跑步区域足够小时，您会得到一个水平条。向右滚动将移动两列但我需要阻止左移动。我尝试使用固定位置，但第二列超过了第一列。有什么想法吗？

由于

Answer 1

这是另一个解决方案：

＆＃13;

$(".innerdiv").height($(".row").height());

＆＃13;

.wrapperdiv {
    overflow-x: auto;
    background-color: #9c9;
}
.innerdiv {
    width: 2000px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row" style="border: 1px solid #575; background-color: #6a6;">
    <div class="col-xs-2 left">123456 asd asdasq sdasd asd asd asd asdas fsdf sdfsfsdfsdf sdfsdfs</div>
    <div class="col-xs-10 wrapperdiv"><div class="innerdiv">abc fds sdf<br> sadf de</div></div>
  </div>
</div>

＆＃13;

Answer 2

这样的事情会有所帮助吗？

https://jsfiddle.net/fhbh0w0q/2/

<div class="col-xs-10" style="border-style:solid; width: 450px;">abcde</div>

相信问题是你使用％作为宽度，这就是它全部崩溃的原因。

希望这有帮助，

一个。

水平滚动时保持柱子就位

2 个答案: