我是编程新手,尝试使用 Flex 使用 CSS/HTML 构建页面。我制作了一个由 3 个 div 组成的面板,可以在整个页面上显示各种广告。到目前为止我只完成了一个,但是在 chrome 中测试时它似乎不起作用。我也在 firefox 中进行了测试,似乎工作正常。我尝试过clearfixes,但无济于事。
SCSS:
main{
width:80%;
margin: calculateRem(30pt) auto;
&>*{
width:100%;
}
#featured_ad_panel{
display:flex;
flex-direction: row;
margin-top: calculateRem(30pt);
&>figure{
flex-grow: 1;
#ad_container{
height:270px;
width: 217px;
border: calculateRem(1pt) solid $color-4;
margin: auto;
}
}
}
}
HTML
<main>
<section id="featured_ads">
<h1>Featured Deals</h1>
<section id="featured_ad_panel">
<figure id="ad1">
<div id="ad_container">
<img src="http://via.placeholder.com/217x270" alt="Phone Image">
</div>
</figure>
<figure id="ad2">Ad 2</figure>
<figure id="ad3">Ad 3</figure>
</section>
</section>
Scss:
<section id="bargains"></section>
</main>
注意calculateRem 函数是一个简单的函数,我用它来从点获取 Rem 大小。
最佳答案
这是很久以前的一个问题,但可能对你有帮助。尝试关闭 Chrome 中的广告拦截器或将 ID 更改为“广告较少”的内容(根据其他问题的答案)
其他 stackoverflow 问题:DIV not showing up in Chrome
关于html - Div 在 Google chrome 中不显示(在 firefox 中显示),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49544214/