0

私の問題は、小さな画面に合わせて、またはウィンドウのサイズが縮小したときに、コンテナーのサイズが変更されないことです。高さ/幅を 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/

元のプラグインではそれができないことに気付きました。コードが乱雑すぎる場合は、プラグインをチェックして、デモ ソースで問題を解決してください。

どんな助けでも大歓迎です - ありがとう！

4

1 に答える 1

0

メディアクエリを見たことがありますか？http://www.w3.org/TR/css3-mediaqueries/

さまざまなサイズの画面にさまざまな css を使用できます。現時点では、インターネット上にそれらに関する多くの情報があります。

于 2012-06-19T06:48:54.183 に答える