带有嵌入图像的HTML部分显示0高度

我正在写一个网站，很困惑，因为当我在m浏览器中打开文件时，下面的代码没有给出高度。我在网上搜索，想知道是不是有什么原因，但我一直没能找到任何东西

当每个图像显示高度为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>

身体
{
最大宽度：640px；
保证金：0自动；
字体系列：helvetica；
}
形象
{
边界：无；
填充：0px；
边际：0px；
高度：自动；
}
div
{
显示：块；
}
A.
{
文字装饰：无；
}
a:悬停
{
文字装饰：无；
}
.club_options.啤酒、.club_options.鲜花、.club_options.雪茄、.club_options.巧克力
{
浮动：左；
左缘：4%；
宽度：44%；
利润底部：4%；
}
.club_options.葡萄酒、.club_options.水果、.club_options.咖啡、.club_options.比萨饼
{
浮动：对；
保证金权利：4%；
宽度：44%；
利润底部：4%；
}
.club_选项。葡萄酒，.club_选项。啤酒
{
利润率最高：4%；
}
P
{
边际：0px；
填充：0px；
}
.content\u wrapper.top\u横幅
{
宽度：100%；
背景色：#A439；
字号：38px；
文本对齐：居中；
填充顶部：15px；
垫底：15px；
}
.content\u wrapper.top\u banner.banner
{
颜色：白色；
}
.content\u wrapper.top\u banner img
{
垫底：4px；
}
.底部横幅.社交媒体
{
宽度：100%；
背景色：#EAEAEA；
}
.底部横幅。社交媒体图片
{
填充顶部：15px；
垫底：15px；
右：2%；
左：2%；
宽度：19%；
}
.底部横幅.社交媒体图片
{
垫底：6px；
}
购买我们的美食俱乐部
&ldquo；
整体最佳，价值最高，出货量大
&rdquo；

部分。club_选项

仅包含浮动元素，因此需要clearfix或

溢出：隐藏

为了避免另一个问题（可能是许多问题中的一个），我认为
image
选择器不会工作得太好。
关联的CSS是什么？您是否有
部分{display:block；}
？开箱即用您提供的代码可以正常工作：您需要提供所需的上下文来演示问题。我更新了问题，以包含更详细的代码示例。当我为.bottom_横幅的背景设置样式时，它也会更改.club_选项，但事实并非如此..club_选项的高度为0。何时以及如何获得0高度？很有可能你是想在任何图片加载之前就得到它的高度，我只是在谷歌浏览器中使用了inspect元素。