帶嵌入式圖像的HTML部分顯示0高度

我正在編寫一個網站，並且感到困惑，因爲當我在m瀏覽器中打開該文件時，以下代碼未給出高度。我在網上搜索，看看是否有一個原因，但我沒有找到任何東西。帶嵌入式圖像的HTML部分顯示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>

來源

2012-10-06 fudge22it

什麼是關聯的CSS？你有'section {display：block; }'？ –

開箱即用的代碼工作正常：http://jsfiddle.net/aStXS/您需要提供所需的上下文來演示問題。 –

我更新了問題以包含我的代碼的更詳細的示例。當我爲.bottom_banners創建背景時，它也會更改.club_options，但情況並非如此.club_options的高度爲0。 – fudge22it

section.club_options僅包含浮動的元素，因此需要一個clearfix或overflow:hidden;。

爲了避免另一個問題（可能是其中之一），我不認爲image選擇器將工作得很好。

來源

2012-10-06 18:29:24

帶嵌入式圖像的HTML部分顯示0高度

回答

相關問題