0

私はウェブサイトを書いていますが、ブラウザでファイルを開いたときに次のコードで高さが表示されないため、混乱しています。何か原因があるのではないかとネットで調べたのですが、見つかりませんでした。

各画像の高さが 0 であるのに、次のセクション (または div) の高さが 0 として表示されるのはなぜですか?

<section class = "class">
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
</section>

このコードの上は次のとおりです。

<section class = "class">
        <span class = "class">Insert Text Here</span>
</section>

これは、正しい高さを持っていることを示しています。

高さのないセクションの後に、次のコードがあります。

<section class = "class">
        <div class = "class"> Insert Code Here </div>
</section>

これにより、すべての画像を含むセクションを含む高さが得られます。これにより、ウェブサイトの残りの部分をスタイリングするときに、本当に混乱してしまいます.

固定の高さを宣言しますが、これはモバイル サイトであり、各画像にはパーセンテージ幅が必要です。つまり、高さはモバイル デバイスに応じて変化します。

ヘルプや説明をいただければ幸いです。ありがとう！

次のコードは、ヘッダーまたはフッターを除いて、私が設定したとおりです。

 <style>
 body
 {
 max-width:640px;
 margin:0 auto;
 font-family: helvetica;
 }
 image
 {
 border:none;
 padding:0px;
 margin:0px;
 height:auto;
 }
 div
 {
 display:block;
 }
 a
 {
 text-decoration:none;
 }
 a:hover
 {
 text-decoration:none;
 }
 .club_options .beer, .club_options .flower, .club_options .cigar, .club_options .chocolate
 {
 float: left;
 margin-left: 4%;
 width: 44%;
 margin-bottom: 4%;
 }
 .club_options .wine, .club_options .fruit, .club_options .coffee, .club_options .pizza
 {
 float: right;
 margin-right: 4%;
 width: 44%;
 margin-bottom: 4%;
 }
 .club_options .wine, .club_options .beer
 {
 margin-top: 4%;
 }
 p
 {
 margin:0px;
 padding:0px;
 }
 .content_wrapper .top_banner
 {
 width: 100%;
 background-color: #A43309;
 font-size: 38px;
 text-align: center;
 padding-top: 15px;
 padding-bottom: 15px;
 }
 .content_wrapper  .top_banner .banner
 {
 color: white;
 }
 .content_wrapper .top_banner img
 {
 padding-bottom: 4px;
 }
 .bottom_banners .social_media
 {
 width: 100%;
 background-color: #EAEAEA;
 }
 .bottom_banners .social_media a img
 {
 padding-top: 15px;
 padding-bottom: 15px;
 padding-right: 2%;
 padding-left: 2%;
 width: 19%;
 }
 .bottom_banners .social_media img
 {
 padding-bottom: 6px;
 }
 </style>
 <section class = "content_wrapper">
    <section class = "top_banner">
        <span class = "banner"> Shop our Gourmet Clubs</span>
        <img src = "../images/arrow.jpg" alt = "Arrow" />
    </section>
    <section class = "club_options">
        <img class = "beer" src = "../images/beer.jpg" alt = "Beer of the Month Club" />
        <img class = "wine" src = "../images/wine.jpg" alt = "Wine of the Month Club" />
        <img class = "flower" src = "../images/flower.jpg" alt = "Flower of the Month Club" />
        <img class = "fruit" src = "../images/fruit.jpg" alt = "Fruit of the Month Club" />
        <img class = "cigar" src = "../images/cigar.jpg" alt = "Cigar of the Month Club" />
        <img class = "coffee" src = "../images/coffee.jpg" alt = "Coffee of the Month Club" />
        <img class = "chocolate" src = "../images/chocolate.jpg" alt = "Chocolate of the Month Club" />
        <img class = "pizza" src = "../images/pizza.jpg" alt = "Pizza of the Month Club" />
    </section>
    <section class = "bottom_banners">
        <!--wall street-->
        <div class = "wall_street_banner">
            <img src = "../images/wall_street_journal_logo.jpg" alt = "Wall Street Journal" />
            <div class = "quote">
                <span class = "apostrophe">&ldquo;</span>
                <span class = "text">Best Overall, Best Value with generous shipments</span>
                <span class = "apostrophe">&rdquo;</span>
            </div>
        </div>
        <!--social media-->
        <section class = "social_media">
            <a href = "#" target = "_blank">
                <img src = "../images/facebook.jpg" alt = "Like us on Facebook" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/twitter.jpg" alt = "Follow us on Twitter" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/google_plus.jpg" alt = "Find us on Google+" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/pinterest.jpg" alt = "Pin it on Pinterest" />
            </a>
        </section>
    </section>
</section>
4

1 に答える 1

1

section.club_optionsには浮動要素のみが含まれているため、clearfix または が必要overflow:hidden;です。

imageそして、別の問題 (おそらく多くのうちの 1 つ) を回避するために、セレクターがうまく機能しないと思います。

于 2012-10-06T18:29:24.953 に答える