我正在编写一个网站并且很困惑，因为当我在 m 浏览器中打开文件时，以下代码没有给出高度。我正在网上搜索是否有原因，但我一直找不到任何东西。
当每个图像都显示时，为什么以下部分（或 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">“</span>
<span class = "text">Best Overall, Best Value with generous shipments</span>
<span class = "apostrophe">”</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>