Question

我正在使用multiscroll.js jquery插件（https://github.com/alvarotrigo/multiscroll.js）它很棒。但是，在某个浏览器宽度下，它会崩溃。所以我希望它能够被禁用＆＃39;并在某个浏览器宽度后显示每个部分的一侧。

就像在此页面上的示例：
一样 http://www.reverzo.tymberry.com/

这是小提琴：http://jsfiddle.net/929u1za0/

我的可怜尝试：
HTML

<div id="myContainer">

    <div class="ms-left">
        <!-- Section 1 left -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
            <div class="ms-section-content">
                <h1>Section 1 left</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 left -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <h1>Section 2 left</h1>
        </div><!-- /.ms-section-content -->
      </div><!-- /.ms-section -->
    </div><!-- /.ms-left -->

    <div class="ms-right">
        <!-- Section 1 right -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <div class="ms-section-content">
                <h1>Section 1 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 right -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
           <div class="ms-section-content">
                <h1>Section 2 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->
    </div><!-- /.ms-right -->   
</div><!-- #myContainer -->

CSS

/**
 * multiscroll 0.0.6 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
.ms-section {
    position: relative;
    @include box-sizing(border-box);
}

.ms-section.ms-table{
    display: table;
    width: 100%;
}

.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.ms-easing {
    @include transition(all 0.7s ease-out);
}

/* Custom styles */
.ms-section {
    text-align: center;
}

/* The media query */
@media screen and (max-width: 700px) {
    .ms-section section2 {
        display: none;
    }
}

我感谢任何帮助！谢谢!!

更新：为什么这不能只显示左侧部分1和右侧部分2？

       @media screen and (max-width: 700px) {
            .ms-left .section1, 
            .ms-right .section2 {
                width: 100% !important;   
            }
        }

Answer 1

您必须将媒体查询更新为：

@media screen and (max-width: 700px) {
    .ms-left, .ms-right {
        width: 100% !important;   
    }
}

小提琴：http://jsfiddle.net/929u1za0/1/

使用媒体查询将两个部分合二为一

1 个答案: