jquery - 如何使垂直 slider 中内容的宽度为 100%？

Question

我已经在这个问题上坚持了几个小时(已经快五个小时了)，我发现了一个非常好的水平 slider 教程，我试图将其实现到我的网站中，它似乎在各方面都工作得很好，除了我无法得到内容在 slider 中显示为全宽。它只占宽度的 70% 左右。我已指定宽度:100%；对于内容，它没有做任何事情。

.panel-group .panel div.survey {
    margin-left: 400px;
    margin-top: 400px;
    position: relative;
    width: 100%;
    right: 0px!important;
    border: 1px solid red;
}

这是我几乎完美的内容，基本上我的目标是让内容以红色边框占据幻灯片的整个宽度

jsfiddle 我在这里错过了一些非常简单的东西吗？感谢任何帮助

Answer 1

您所说的“宽度”实际上是面板的高度。

面板已旋转 90 度。您需要调整面板的高度以占据屏幕的整个宽度。

首先获取屏幕的宽度，然后调整面板高度，最后调整调查高度。在尝试了各种窗口大小之后，我发现以下方法有效:

var width = $(window).width();
$(".panel-body").height(width);
$(".survey").css("width", width - 60);
$(".survey").css("margin-top", width - 70);

还包括一个调整大小功能，以便如果用户更改屏幕分辨率，面板将进行调整:

$(window).resize(function(){
    var width = $(window).width();
    $(".panel-body").height(width);
    $(".survey").css("width", width - 60);
    $(".survey").css("margin-top", width - 70);
});

JS Fiddle Demo