如何使其在所有浏览器上和不同的屏幕尺寸上看起来相同？

Question

我正在使用猫头鹰传送带在我的网站上滑动容器。滑块正常工作，只有在最小化屏幕或在其他显示器或其他浏览器上进行检查后，才会出现此问题。

基本上，下面的代码对于所有的Web应用程序和屏幕尺寸都不相同。

容器的大小随所有浏览器和监视器大小的不同而变化。有人可以在这里引导我吗？

<div class="container" style= "background-color: #DCDCDC;"> 
    <div class="country-name">Countries</div>
    <div class= "owl-carousel own-theme" style="padding-bottom: 15px;">
        <div class="column-about">
            <div class="country-list">Opportunities?</div>
            <div id="MyDIV">
                The range of courses offered at the universities is vast and gives you the opportunity to choose the area<a href="listofcountries.html#anchor-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities?</div>
            <div id="MyDIV">
                rsities in the world with a modern approach to education and a welcoming<a href="listofcountries.html#netherland-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities ?</div>
            <div id="MyDIV">
                Theopular destinations to study higher education, with more than 500,000 students e education degrees and the qualifications are recognised by employers<a href="listofcountries.html#uk-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunitie?</div>
            <div id="MyDIV">
                higher education system is one of the best in Europe with a good career opportunities. Students attending a<a href="listofcountries.html#france-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
        <div class="column-about">
            <div class="country-list">Opportunities ?</div>
            <div id="MyDIV">
                Universitee Programs in the world. University i<a href="listofcountries.html#sweden-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    </div>  
</div>

<script type="text/javascript">
$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    dotsContainer: true,
    nav: true,
    autoplay: true,
    autoplayTimeout: 2000,  
    autoplayHoverPause: true,           
    responsive: {
        0: {
            items: 1
        },
        300: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        },
        1600: {
            items: 5
        }
    }
});

function myFunction() {
    document.getElementById("myDIV").style.MozTextAlignLast = "right"; 
    document.getElementById("myDIV").style.textAlignLast = "right";
}
</script>

Answer 1

您是否已定义

<meta name="viewport" content="width=device-width, initial-scale=1.0">