0

私が達成しようとしているのは、異なる特定の幅と同じ高さを持つ 3 つの div が連続していることです。そのうちの 2 つには実際にコンテンツがあり、中央の 1 つには垂直のスペーサー画像が含まれているだけです。これら 3 つの div は、他のスライドと共に「スライド」div に含まれています。スライドはすべて 1 つのコンテナー div にあり、JavaScript で制御され、一度に 1 つのスライドを除くすべてを非表示にします。問題はスライドではなく、コンテンツのレイアウトであることに注意してください。現在、2 番目のスライド スタック内の 3 つの div を互いに重ねることしかできませんが、最初のスライドの 4 つの div で完全に正常に動作します。これまでに試してみて、うまくいかなかったものは次のとおりです。

  • float:left;各divで
  • float:left;最初の 2 つ、次にfloat:right最後に
  • display:inline;各divで
  • display:inline-table;
  • 正確ではない幅を下げる
  • すべての余白を削除する
  • clear:left;3 番目の div の後
  • clear:both;3 番目の div の後
  • class代わりに使用するid（実際に変更されました）
  • 上記のさまざまな組み合わせ

コードには Eclipse を使用し、Mac OS X では Safari を使用してテストしています。すべてが最新です。これを2日半にわたって機能させようとしてきたので、どんな助けも大歓迎です。これが私のコードです。問題を見つけるためにさらにコードが必要な場合は、お知らせください。

HTML:

     <div id="container">
         <div class="slide1">

            <div id="news-content">
                <div id="news-img">
                    <img src="album_example.png" />
                </div>
                <div id="news-img-description">
                    <h2 align="left">Lorem Ipsum</h2>
                    <p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat dictum pharetra. Cras porta.</p>
                </div>
                <div id="news-vr">
                    <img src="light_vr.png" />
                </div>
                <div id="news-feed">

                </div>
            </div>


        </div>


        <div class="slide2">
            <div id="music-content">
                <div id="music_albums">
                    <ul style="list-style-type: none;">
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                    </ul>
                </div>
                <div id="music_vr">
                    <img src="light_vr.png" />
                </div>
                <div id="music_remixes">
                </div>
            </div>
        </div>
        <div class="slide3">
        <h2>This is slide 3.</h2></div>
        <div class="slide4">
        <h2>This is slide 4.</h2></div>
    </div>

*album_example.png は 300x300、album_test.png は 100x100

CSS:

@CHARSET "UTF-8";

h2 {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150%;
}

p {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
}

#container {
    width: 900px;
    height: 500px;
}

.slide1, .slide2, .slide3, .slide4 {
    width: 900px;
    height: 500px;
}

#news-content {
    width: 900px;
    height: 500px;
    margin: 0;
    max-height: 500px;
}

#news-img {
    float: left;
    width: 300px;
    padding: 100px 0 0;
    max-height: 300px;
}

#news-img-description {
    float: left;
    width: 295px;
    padding: 160px 15px 0 15px;
    max-height: 340px;
}

#news-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    max-height: 500px;
}

#news-feed {
    float: right;
    width: 300px;
    max-height: 500px;
}

#music-content {
    width: 900;
    height: 500;
    margin: 0;
    max-height: 500px;
}

#music-albums {
    float: left;
    width: 447px;
    padding: 15px 0 0 0;
    max-height: 485px;
}

#music-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    display: inline-block;
    max-height: 500px;
}

#music-remixes {
    float: left;
    width: 448px;
    padding: 15px 0 0 0;
    display: inline-block;
    max-height: 485px;
}

#music-albums, #music-remixes ul
{
    margin: 0;
    padding: 0;
}

#music-albums, #music-remixes ul li
{
    margin: 0 0 1em;
    padding: 0;
    list-style-type: none;
}
4

4 に答える 4

2

Ok。したがって、今回は質問に適切に答えます。

アンダースコアとダッシュが混同されています。HTML内の多くのIDはアンダースコアを使用し、対応するCSSはダッシュを使用します（たとえばmusic_vr、HTMLやmusic-vrCSSなど）。

それは少なくとも物事が意味をなし始めるようになるはずです。

jsfiddleで少しクリーンアップを行いました。これは、適切な要素を選択すると、floatルールが実際に機能することを示しています。

FirefoxやChrome/SafariのFirebugやElementInspectorのようなツールは、このようなものに本当に役立ちます-ルールが要素に適用されていないことがすぐにわかります。いくつかのタイプミスがそれを引き起こしていたことを。

于 2012-06-25T19:03:32.843 に答える
1

ディスプレイを使用してみましたか：3つのdivでインラインブロックし、相対的な位置でそれぞれを左に浮かせますか？

すなわち。

.all3divs {
position: relative;
float: left;
display: inline-block;
}

ただし、中央の「間隔」divは1ピクセル幅のように見えますか？この場合、それを削除して最初のdivに境界線を付けることができませんでした-right：1px; css3 border-imageを使用してスペーサー画像を配置しますか？

これはクリーンに見え、オーバーヘッドが少なくなります。

于 2012-06-25T17:54:16.447 に答える
1

これを追加してみてください：

.slide1, .slide2, .slide3, .slide4 {
   float: left;
   margin-left: 20px;
   background-color: #eeeeee;
}

コンテンツをラップ するfloatプロパティを追加する必要があります。あなたの場合、それはslide1、slide2、...です<div>

<div>


または2番目のアプローチ

.slide1, .slide2, .slide3, .slide4 {
   margin-left: 10px;
   display: inline-block;
   background-color: #cccccc;
}


注: jsfiddle 1、jsfiddle 2での単純化された例の作業。

于 2012-06-25T17:49:20.743 に答える
1

div の幅が狭すぎる可能性があります。css をリセットしてみてください: http://meyerweb.com/eric/tools/css/reset/ 。また、スライドで 10 ピクセルの幅のスペースが使用されないように、動作していない div の幅を小さくしてみてください。

于 2012-06-25T18:50:17.637 に答える