程序员经验分享-hwhale

如何停止滚动比div高度长的div？

2024-03-29

我有图像，与右侧对齐，位置是固定的，并且大文本内容与左侧对齐。 如何做到右侧的图像和文本内容只能通过使用 bootstrap 来滚动。这是我的代码。

感谢您的时间和建议

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" style="margin-top: 50px;">
		<div class="row pull-right" style=" width: 60%;float: right;"><img src="https://picsum.photos/200/300/?random" alt="" width="1000px" height="1000px"></div>
		<div class="row pull-left" style=" width: 35%;float: left;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.</p></div>
	</div>

我不太确定，但是，我想，你只能通过坐在height两列的属性为固定数量，例如，600px。然后，使用overflow: scroll对于段落列。

使两列的高度与img，如果你知道高度img预先。否则，请使用number你认为合适的。

Bootstrap-3 

.mt-10 {
  margin-top: 10rem;
}

.col-left,
.col-right {
  max-height: 600px;
}

.overflow-scroll {
  overflow: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container mt-10">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-left overflow-scroll">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam
        suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint
        ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam
        suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint
        ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-right">
      <img src="https://picsum.photos/1000/1000/?random" alt="" class="img-responsive">
    </div>
  </div>
</div>

检查这个pen https://codepen.io/anon/pen/erLMeW

Bootstrap-4 

.col-left,
.col-right {
  height: 600px;
}

.overflow-scroll {
  overflow: scroll;
}
<div class="container mt-5">
  <div class="row">
    <div class="col-12 col-sm-6 col-left overflow-scroll">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam
        suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint
        ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam
        suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint
        ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus
        atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit,
        adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in
        unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.</p>
    </div>
    <div class="col-12 col-sm-6 col-right">
      <img src="https://picsum.photos/500/600/?gravity=east" alt="" class="img-fluid">
    </div>
  </div>
</div>

检查这个pen https://codepen.io/anon/pen/JvaLOL

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

css

Bootstrap4

sticky

scrollspy

如何停止滚动比div高度长的div？ 的相关文章

随机推荐

  • Dealloc 被调用两次？

    解决 感谢孤独枪手 这个问题是由于在释放许多代表之前没有将其设置为零而造成的 这是一个奇怪的 我熟悉基本的内存管理 但我认为我所看到的有些不寻常 这是一些背景 我有一个 NavigationController 来处理以下 ViewCont

  • “Binding”类型的 DependencyProperty 未更新

    我在创建 Binding 类型的 DependencyProperty 时遇到问题 其他类型工作正常 如果我使用绑定填充它们 它们就会成功解析 在我的场景中 我想获取原始绑定 以便我可以使用它来绑定到子对象的属性 这与 DataGrid 处

  • 相对于视图的CGPoint

    考虑一个屏幕点 CGPoint 和一个视图 UIView 它位于视图层次结构内部的某个位置 它可以是其他视图的子视图 如何将点转换为相对于视图坐标的点 首先 将该点从屏幕坐标转换为主窗口的坐标 UIWindow mainWindow UIA

  • 分配新值后将 ObservableCollection 绑定到 DataGrid

    这似乎是一个简单的问题 但我无法让它发挥作用 我有一个具有以下属性的用户控件 public ObservableCollection

  • 仅当 IP 地址获得批准时才允许用户访问页面

    如何制作一个 HTML 和 CSS PHP JavaScript 文档 只允许页面上的某些 IP 地址 我不是问 how 使用 PHP 查找 IP 地址 但如何允许基于 IP 地址访问页面 把它放在你的 php 文件的顶部并更新allowe

  • 用于创建断开连接的数据库应用程序的最佳基于 .NET3.5 的策略

    我的要求是 相对较小的数据库 25 30 个表 每个表有 4 5k 行 4 5 个用户在其笔记本电脑上拥有自己的本地数据库副本 在需要时或一天结束时进行同步 免费解决方案 正如我为 NFP 组织进行的设置一样 过去几天我一直在研究各种选择

  • 如何调试肉桂小程序？

    我想写一个肉桂小程序 这些都是基于 JavaScript 的 我希望编写的代码更改服务 打开和关闭它们 类似于WebDeveloper菜单小程序 https bitbucket org infiniteshroom cinnamon web

  • 仅保留 git 中文件子集的提交

    我想实现以下目标 保留我选择的文件的所有更改历史记录 或提交 有些文件被重命名 有些文件也从其他目录移动 我想删除与我从 git 日志中选择的文件无关的所有提交 我尝试了不同的方法 例如this https medium com ayush

  • 如何通过http打开远程sqlite数据库？

    是否可以通过 http 打开 sqlite 文件 我只需要读取数据库 并希望我可以做类似的事情 var dbFile File new File http 10 1 1 50 project db sqlite sqlConnection

  • Angular View 绑定未使用简单布尔值更新

    再见 这可能是一个菜鸟问题 但我无法让它发挥作用 我有一个简单的服务 可以切换布尔值 如果布尔值为 true 则活动类应该出现在我的 div 上 如果为 false 则没有类 就这么简单 但是布尔值已更新 但我的视图没有对此做出反应 我是否

  • if match 语句中的 #N/A 返回 FALSE

    如果出现匹配错误 我会尝试显示 FALSE 值 现在 我还无法弄清楚 我对谷歌电子表格中的公式如何工作仍然很陌生 IF MATCH A16 W46 W52 0 TRUE FALSE 如果该值存在 则当前有效 我努力了 IF ISNA MAT

  • 大于/小于的 switch 语句

    所以我想使用这样的 switch 语句 switch scrollLeft case lt 1000 do stuff break case gt 1000 lt 2000 do stuff break 现在我知道这些陈述中的任何一个 lt

  • 如何找到多维数组的 .index

    尝试了网络资源 但没有任何运气和我的视觉快速入门指南 如果我有二维 多维数组 array x x x x x S x x x x x print array index S it returns nil 然后我去输入 array x S x

  • Facebook PHP SDK - 无法正确注销

    我花了几个小时寻找这个问题的解决方案 但找不到适合我的解决方案 当我在网站上单击 注销 时 用户信息仍然可见 并且仍然显示注销按钮 这是代码 require facebook php sdk src facebook php faceboo

  • Netlify 重定向不起作用 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 所以昨天我遇到了问题 因为我无法对 GitHub 页面上托管的页面实施 301 重定向 今天我发现 Netlify 应该

  • 为什么我不能在 build() 中使用 context.read，但可以将 Provider.of 与 Listen: false 一起使用？

    文档中指出这些是相同的 并且context read只是一个捷径Provider of

  • 无法将 openlayers-3 与 webpack 一起使用

    我必须将 openlayers 包含在我正在开发的项目中 我已经尝试过将其包含在ext文件夹和 npm 我在我的工作流程中使用 Webpack 编译时 我在控制台中收到以下警告 WARNING in openlayers dist ol j

  • 基于 Observable 的 API 和取消订阅问题

    我正在尝试使用 Rx Java 创建一个用于 Android 上位置跟踪的类 我仍然不知道如何正确处理我的 Observable 的生命周期 我想要的是一个 Observable 它在第一次订阅发生时开始跟踪位置 并在最后一次订阅被丢弃时停

  • 使用承载授权将 PouchDB 同步到 Cloudant 时出现错误

    我是一名经验丰富的 JavaScript 程序员 但对 PouchDB Cloudant 和 oAuth 还很陌生 当我尝试使用承载授权同步 PouchDB 和 Cloudant 时 出现错误 reader access is requir

  • 如何停止滚动比div高度长的div？

    我有图像 与右侧对齐 位置是固定的 并且大文本内容与左侧对齐 如何做到右侧的图像和文本内容只能通过使用 bootstrap 来滚动 这是我的代码 感谢您的时间和建议

热门标签