Question

我的问题是容器不会调整大小以适应较小的屏幕或窗口大小缩小。我尝试过百分比方法，我将高度/宽度设置为100％甚至50％，容器消失。花了好几周之后，我绝对没有。还需要支持IE6，这是我的头脑。

.ca-container{
 position:relative;
 margin:-45px auto 20px auto;
 width:990px;
 height:500px; 
}

.ca-wrapper{
 width:100%;
 height:100%;
 position:relative; 
}

.ca-more{
 position: absolute;
 bottom: 10px;
 right:0px;
 padding:4px 15px;
 font-weight:bold;
 background: #000;
 text-align:center;
 color: white;
 font-family: "Georgia","Times New Roman",serif;
 text-shadow:1px 1px 1px #897c63;    
}

.ca-item{
position:relative;
float:left;
width:330px;    
height:100%;
text-align:center; 
}

.ca-item-main{

 padding:20px;
 position:absolute;
 top:5px;
 left:5px;
 right:5px;
 bottom:5px;
 background:#fff;
 overflow:hidden;
 -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}

这是我的网页的html。我已经截断它只是为了显示第一个项目的结构（我删除了我的内容）

        <div class="container">                
            <div></div>
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
                    <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"></div>
                            <h3></h3>
                            <h4></h4>
                            <a href="#" class="ca-more">Read...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <h6></h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p>xxxxxxxx </p>

                                </div>
                            </div>
                        </div>
                    </div>

原始插件是循环内容轮播：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

我已经意识到原始插件没有这样做。如果我的代码太乱，请查看插件并使用演示源解决问题。

非常感谢任何帮助 - 谢谢！

Answer 1

你看过媒体查询了吗？ http://www.w3.org/TR/css3-mediaqueries/

你可以为不同尺寸的屏幕提供不同的css - 这里有很多关于互联网的信息。

css调整div容器的大小以适应小窗口

1 个答案: