根据浏览器的宽度调整 div 的宽度

Question

我有一个带寻呼机的幻灯片和幻灯片寻呼机旁边的一些按钮（here 是 html 页），我正在尝试使其响应。

我正在从数据库中获取的图像。所以这在数量上是不同的。

问题是 pager/navigation 幻灯片放映对于较少数量的图像没问题，但对于更多图像就会出现问题。寻呼机与旁边的按钮重叠。如下图：

对于桌面屏幕：

对于小屏幕：

下面是div结构

<div id="controls-wrapper" >
   <div id="controls">
         <div id="cycle-nav"><ul></ul></div> <!-- pager -->
   </div>
   <div class="button1" id="button1">
   <a href="#">button 1</a>
   </div>
   <div class="button2" id="button2">button 2</div>
   <div class="button3"><a href="#" target="_blank">button 3</a></div>
</div>

如果可能的话，我正在寻找 media queries 以外的解决方案。我尝试通过 $(width).width() 函数将容器 div 放在上面的结构中，并给它 100% 的宽度和高度，给所有 div 以 % 为单位的宽度。但没有得到解决方案。

jsfiddle

有什么方法可以根据浏览器的屏幕尺寸动态调整 div 的宽度吗？

Answer 1

您可以使用@media 查询。这是一个例子：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: lightblue;
            }

            @media screen and (max-width: 300px) {
                body {
                    background-color: lightgreen;
                }
            }
        </style>
     </head>
    <body>
     ...
</body>
</html>

这会将主体的背景颜色更改为浅蓝色。但是，当您将浏览器 window 调整为小于 300 像素时，它将变为浅绿色。我希望这会帮助你解决你的问题。

Answer 2

是的，使用 vw 和 vh CSS 属性。

1vw = window 宽度的 1%， 1vh = window 高度的 1%。

http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

Answer 3

这是使用 CSS 和 HTML 的简单解决方案，没有 @media 查询没有 JavaScript，我刚刚将 HTML 和 CSS 的一些行修改为下面的代码。

HTML

<div id="controls-wrapper" >
            <div id="controls">
            <div id="cycle-nav"><ul></ul></div>
            </div>
            <div class="buton-controls">
                <div class="button1" id="button1">
                <a href="#">button 1</a>
                </div>
                <div class="button2" id="button2">button 2</div>
                <div class="button3"><a href="#" target="_blank">button 3</a></div>
            </div>
        </div>

css

/* I wanted to center my loader */
            #cycle-loader {
                height:32px;
                left:50%;
                margin:-8px 0 0 -8px;
                position:absolute;
                top:50%;
                width:32px;
                z-index:999;
            }

            /*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
            #maximage {
                display:none;/* Only use this if you fade it in again after the images load */
                position:fixed !important;
            }


        #arrow_left, #arrow_right {
                bottom:45%;
                height:67px;
                position:fixed;
                right:3%;

                width:36px;
                z-index:1000;
            }
            #arrow_left {
                left:3%;
            }

            #arrow_left:hover, #arrow_right:hover {
                bottom:45%;
            }
            #arrow_left:active, #arrow_right:active {
                bottom:45%;
            }
            a {color:#666;text-decoration:none;}
            a:hover {text-decoration:underline;}

            /*I want to style my pager*/
#cycle-nav {
    /*    float:left;*/
    margin-top: 8px;
    margin-left: 0;
    text-align: center;
}
#cycle-nav ul {
    list-style-type:none;
    width: 100%
}
#cycle-nav ul li {
/*    border:1px solid #FF8000;*/
    display: inline-block;
    margin:3px;
}

#cycle-nav ul li a {
  /*background: #057c96;*/
    background: #49BED8;

    float:left;
    height:10px;
    margin:2px;
    width:10px;


}


#cycle-nav ul li a:hover {
        background: #000;
        opacity:0.6;

}

#cycle-nav ul li.activeSlide {
   /* border:1px solid #000;*/
/*   background: #075262;*/
    }

#cycle-nav ul li.activeSlide > a {
    background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }

#controls { width: 50%; float: left; }
.buton-controls{
    width: 50%; 
    float: left;
    text-align: center;
}
.buton-controls > div{
    display: inline-block;
}
.button2{
    background-color: red;
    font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
    height: 20px;
    opacity: 0.4;
    text-align: center;
    width: 70px;
    color:#FFFFFF;
}

.button2:hover{
    background-color:#000;
    cursor:pointer;
    opacity:1 !important;
}

.button2hoverBg{
    background-color:#137087 !important;
    cursor:pointer;
    opacity:1;
}

.button3{
background-color: red;
    color:#FFFFFF;
    font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
    height: 20px;
    opacity: 0.4;
    position: relative;
    text-align: center;
    z-index: 10;
    width: 70px;\
}

.button3:hover, a:hover{
    background-color:#000;
    cursor:pointer;
    opacity:1 !important;
        text-decoration:none;
        color:#FFFFFF;
}

.button3 a{
    color:#FFFFFF;
   text-decoration:none;

}


.button1{
    background-color: red;
    color:#FFFFFF;
    font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
    height: 20px;
    text-align: center;
    width: 70px;
    z-index: 10;
    opacity: 0.4;
}

.button1 a{
    color:#FFFFFF;
   text-decoration:none;

}

根据浏览器的宽度调整 div 的宽度

re-size the width of div depending on browser's width

javascript

css

jquery

responsive-design