个人中心
gpt4 book ai didi

html - 为什么 100% 宽度不能在这里工作？ (html/css)

转载 作者：太空宇宙 更新时间：2023-11-04 10:11:05 25 4
gpt4 key购买 nike

这行代码可以在下面完整的代码框中找到

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; overflow:hidden;width:100%;height:630px">

...是我遇到的问题。出于某种原因，我无法将 div 拉伸(stretch)到 100%，当我将其设置为 100% 时，它改为调整为 100 像素。有什么想法吗？？

<head>
<style>
div#scroller
{
width: 100%;
position: absolute;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
</head>

<body>
<div id="scroller"><!-- Caption Style -->
<style> 
    .captionOrange, .captionBlack
    {
        color: #FFFFFF;
        font-size: 36px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
    }
    .captionOrange
    {
        background: #FFFFFF;
        background-color: rgba(128, 0, 0, 1);
    }
    .captionBlack
    {
        font-size:36px;
        background: #800000;
        background-color: rgba(128, 0, 0, 0.4);
    }
    a.captionOrange, A.captionOrange:active, A.captionOrange:visited
    {
        color: #5882FA;
        text-decoration: none;
    }
    a.captionOrange:hover
    {
        color: #eb5100;
        text-decoration: underline;
        background-color: #eeeeee;
        background-color: rgba(238, 238, 238, 0.7);
    }
    .bricon
    {
        background: url(img/browser-icons.png);
    }
</style>
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<script>

    jQuery(document).ready(function ($) {
        //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
        //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

        var _CaptionTransitions = [
        //CLIP|LR
        {$Duration: 900, $Clip: 3, $Easing: $Jease$.$InOutCubic },
        //CLIP|TB
        {$Duration: 900, $Clip: 12, $Easing: $Jease$.$InOutCubic },

        //ZMF|10
        {$Duration: 600, $Zoom: 11, $Easing: { $Zoom: $Jease$.$InExpo, $Opacity: $Jease$.$Linear }, $Opacity: 2 },

        //ZML|R
        {$Duration: 600, x: -0.6, $Zoom: 11, $Easing: { $Left: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic }, $Opacity: 2 },
        //ZML|B
        {$Duration: 600, y: -0.6, $Zoom: 11, $Easing: { $Top: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic }, $Opacity: 2 },

        //ZMS|B
        {$Duration: 700, y: -0.6, $Zoom: 1, $Easing: { $Top: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic }, $Opacity: 2 },

        //RTT|10
        {$Duration: 700, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $Jease$.$InExpo, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },

        //RTTL|R
        {$Duration: 700, x: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} },
        //RTTL|B
        {$Duration: 700, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Top: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} },

        //RTTS|R
        {$Duration: 700, x: -0.6, $Zoom: 1, $Rotate: 1, $Easing: { $Left: $Jease$.$InQuad, $Zoom: $Jease$.$InQuad, $Rotate: $Jease$.$InQuad, $Opacity: $Jease$.$OutQuad }, $Opacity: 2, $Round: { $Rotate: 1.2} },
        //RTTS|B
        {$Duration: 700, y: -0.6, $Zoom: 1, $Rotate: 1, $Easing: { $Top: $Jease$.$InQuad, $Zoom: $Jease$.$InQuad, $Rotate: $Jease$.$InQuad, $Opacity: $Jease$.$OutQuad }, $Opacity: 2, $Round: { $Rotate: 1.2} },

        //R|IB
        {$Duration: 900, x: -0.6, $Easing: { $Left: $Jease$.$InOutBack }, $Opacity: 2 },
        //B|IB
        {$Duration: 900, y: -0.6, $Easing: { $Top: $Jease$.$InOutBack }, $Opacity: 2 },

        ];

        var options = {
            $AutoPlay: 1,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $Idle: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 0,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            $SlideSpacing: 0,                                   //[Optional] Space between each slide in pixels, default value is 0
            $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)

            $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            },

            $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;

            var parentHeight = jssor_slider1.$Elmt.parentNode.clientHeighth;
            if (parentHeight)
                jssor_slider1.$SetScaleHeight(Math.min(parentHeight, 630));
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
        }


        //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
        //    $(window).bind("orientationchange", ScaleSlider);
        //}
        //responsive code end
    });
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:100%; height:630px; overflow: hidden; ">

    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
            background-color: #800000; top: 0px; left: 0px;width: 100%;height:630px;">
        </div>
        <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
            top: 0px; left: 0px;width: 100%;height:630px;">
        </div>
    </div>

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; overflow:hidden;width:100%;height:630px">
        <div style="width:100%">
            <img u="image" src="img/photography/002.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/003.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/004.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/005.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/006.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/007.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/008.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/009.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/010.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/011.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/012.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/013.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/014.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/015.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/016.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/017.jpg" />
        </div>
        <div style="width:100%">
            <img u="image" src="img/photography/018.jpg" />
        </div>
    </div>

    <!-- Bullet Navigator Skin Begin -->
    <!-- jssor slider bullet navigator skin 01 -->
    <style>
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #800000 1px solid;
        }

        .jssorb01 div {
            background-color: gray;
        }

            .jssorb01 div:hover, .jssorb01 .av:hover {
                background-color: #d3d3d3;
            }

        .jssorb01 .av {
            background-color: #fff;
        }

        .jssorb01 .dn, .jssorb01 .dn:hover {
            background-color: #555555;
        }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
    </div>
    <!-- Bullet Navigator Skin End -->

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 02 css */
        /*
        .jssora02l              (normal)
        .jssora02r              (normal)
        .jssora02l:hover        (normal mouseover)
        .jssora02r:hover        (normal mouseover)
        .jssora02ldn            (mousedown)
        .jssora02rdn            (mousedown)
        */
        .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(img/a02.png) no-repeat;
            overflow:hidden;
        }
        .jssora02l { background-position: -3px -33px; }
        .jssora02r { background-position: -63px -33px; }
        .jssora02l:hover { background-position: -123px -33px; }
        .jssora02r:hover { background-position: -183px -33px; }
        .jssora02ldn { background-position: -243px -33px; }
        .jssora02rdn { background-position: -303px -33px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora02l" style="width: 0px; height: 55px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora02r" style="width: 0px; height: 55px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">jquery responsive      slider</a>
</div>
<!-- Jssor Slider End --></div></div>
<div id="container">
</body>

最佳答案

也许将您的 div id #scroller 更改为 div class .scroller 可能会解决您的问题。

尝试:

div.scroller 
{ 
max-width: 1400px; 
width: 100%; 
position: absolute; 
height: 630px; 
}

关于html - 为什么 100% 宽度不能在这里工作？ (html/css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37605584/

25 4 0
文章推荐： linux - sed: -e expression #1, char 27: invalid reference\1 on `s' 命令的 RHS
文章推荐： python - 使用 pydbus 库通过 session 总线发送信号
文章推荐： java - Intellij 中的 Maven 项目作为模块，无法识别新的 Maven 依赖项
文章推荐： linux - 在 crontab 文件中重命名文件名
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com