两个div并行在一起[重复]答案

【问题标题】：Two div together in parallel [duplicate]两个div并行在一起[重复]
【发布时间】：2017-03-26 10:11:56
【问题描述】：

我在保持两个 div 平行时遇到问题

第一个 div 应该包含大数据，但使用浏览器滚动，第二个 div 应该包含小数据，并在右侧保持固定。

所以当用户滚动页面时，两个 div 应该保持平行

示例在这里(example)[https://app.thehomelike.com/apartment/RyeR9wQH4N7p2YRJA] 在上面的页面中，当您在描述后访问时，它显示了两个并行 div .. 一个保持固定 .. 另一个随着浏览器滚动条移动

编辑我的努力

             <div className="book">

                    <table>
                        <tr>
                            <td>
                                <div class className="page1">
                                    <h2>Page1</h2>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                </div>
                            </td>
                            <td>
                                <div className="page2" style={style} onScroll={this.handleScroll.bind(this)}>
                                    <h2>Page2</h2>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                //css

                .book table td {
                 vertical-align: top;
                }

              .page1 {
             border: solid 1px red;
             width: 400px;
           }

         .page2 {
         border: solid 1px red;
         width: 400px;
         position: static;
         }

【问题讨论】：

你想要网格视图？？
我没有看到任何并行的 div，只是一个 pinterest 瀑布图像库
是的网格视图会很好
试图用一张表达到你想要的效果几乎是不可能的。在您提供的链接中，他们使用了 2 个 div，设置为浏览器高度，向左浮动，设置宽度和第一次潜水，将 overflow_y 设置为滚动。
这实际上是基本的 CSS 定位。您应该使用定义宽度的 2 个 div（不是表格），然后使用 position 属性。

标签： javascript html css

【解决方案1】：

.book {
  position: relative;
}
.page1 {
  background-color: azure;
  width: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top:0;
}

.page2 {
  background-color: tomato;
  width: 50%;
  margin: 0;
  padding: 0;
  position: fixed;
  right:0;
  top: 0;
}

https://jsfiddle.net/1ygo20xf/

【讨论】：

真是个了不起的人……谢谢……我喜欢……
overflow-y: scroll 强制垂直滚动条出现
没问题。如果您想了解更多关于定位的信息developer.mozilla.org/en-US/docs/Web/CSS/position
问题是我上面还有一些内容..所以不能使用这个...
因为它总是固定在左侧......所以它没用

【解决方案2】：

$(document).ready(function(){
	$(function(){
		$(document).scroll(function(){
			if($(this).scrollTop() >= $('.largeCont').offset().top) {
				$(".fixedCont").addClass('active');
			} else {
				$(".fixedCont").removeClass("active");
			}
		});
	});
});

html, body {
    margin: 0;
}

.section1 {
  background-color: #fff;
  height: 300px;
}

section {
  display: flex;
  flex-wrap: wrap;
}
section .largeCont {
  width: 70%;
}
section .fixedCont {
  height: 100vh;
  background-color: green;
  width: 30%;
}
section .fixedCont.active {
  position: fixed;
  right: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
  SOME CONTENT
</section>

<section>
  <div class="largeCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim maxime dicta quaerat id a maiores modi facilis, quisquam inventore at cum voluptas veniam obcaecati et sequi, libero, molestias tempore! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Officiis dolores vero, rem quod inventore, ipsam cupiditate rerum tempore explicabo veniam voluptatem dolorem minima dignissimos id est harum sequi odit, corporis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur
    necessitatibus provident accusantium, explicabo velit dolorum molestiae soluta doloribus architecto ea nesciunt porro distinctio quod nulla mollitia, obcaecati impedit dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos, porro
    neque optio id aspernatur error atque blanditiis qui odio accusantium assumenda recusandae dolores culpa laborum voluptas, facere provident nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a dignissimos similique, incidunt
    quas voluptatem fuga adipisci. Non deleniti obcaecati, doloribus tempora deserunt, facilis ipsum magnam quis veritatis ut nemo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quos adipisci debitis inventore sed, fugit, maxime vitae
    expedita consectetur a numquam nostrum repellendus vero mollitia, rem beatae vel ex aliquam!
  </div>
  <div class="fixedCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis mollitia amet ipsam vel saepe, rerum deserunt accusantium ratione reprehenderit eaque unde cumque! Expedita amet molestiae, dolorem porro nam nisi dolorum.
  </div>
</section>

像这样的？我认为是。

【讨论】：

是的，你是对的人......
你能在核心 javascript 方面帮助我吗.. 因为我在 react.js 工作所以不能使用 Jquery
这可能吗？？
jsfiddle.net/4zh7yuyq/2 抱歉，迟到了，正在努力。检查小提琴，如果它对你有帮助，请立即告诉我
是的，它太棒了.. 让我现在试试我的系统.. 非常感谢

【解决方案3】：

试试看

.box {
    width:100px;
    display:box;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
     /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}

.box .column1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: yellow;
}

.box .column2 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: green;
}

 <div class="box">
      <div class="column1">
          a<br>b
      </div>
      <div class="column2">
         a
      </div>
   </div>

【讨论】：

【解决方案4】：

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 0;
}
div#one {
    width: 50%;
    height: 200px;
    background: red;
    float: left;
    overflow-y: scroll;
}
div#two {
    margin-left: 50%;
    height: 200px;
    background: black;
}

<section>
    <div id="one">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="two"></div>
</section>

【讨论】：

我认为你应该再次检查链接...
感谢更新...但这不是必需的，请查看我提供的链接..
你想要并排的公寓列表和地图布局，对吧？
你离得很近.. 但我只想要一个滚动条.. 那将是浏览器滚动条.. div 没有滚动条
这可能吗？？