我正在使用骨架网格和重置CSS来设计网站的样式。我在容器中遇到一些规则方面的问题,现在我知道它与骨架有关。我在网站每一页的顶部都有一个图像,在每个图像的底部有一小部分,其中有一些文本,并且两端都有一个图标,我似乎无法正确定位。看起来就是这样-
这是我的编码版本-
(背景图片不同,还有代理商/企业图片需要添加)
在我的编码版本中,底部的文本和图标无法正确定位到页面边缘。我尝试过重建页面,首先没有reset.css,然后没有框架,也没有框架,它们移到了边缘。但是,我更喜欢保留骨架网格,因为它用于在网站上放置大多数其他元素/部分。如何禁用/覆盖此特定零件的骨架规则?这是我目前的代码-
的HTML
<section id="home">
<a href="agency.html">Are you an agency?</a>
<a href="business.html">Or a business?</a>
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</section>
的CSS
body {
width: 960px;
margin: 0 auto 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.container {
margin: auto;
padding-left: 10px;
padding-right: 10px;
}
/* HOME PAGE */
section#home {
height: 400px;
max-width: 100%;
background: url(../images/homepagemain.jpg) center center no-repeat;
background-size: 960px;
background-position: center;
overflow: hidden;
position: relative;
}
.showreel {
height: 50px;
width: 960px;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between;
}
.showreel, .showreel > div {
display: flex;
align-items: center;
}
.showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore i {
margin-right: 30px;
}
.seeour i {
margin-left: 30px;
}
最佳答案
只需在css部分下面添加
改变这个
.showreel, .showreel > div {
display: flex;
align-items: center;
}
对此
.showreel, .showreel > div.seemore {
display: flex;
align-items: center;
justify-content: flex-start;
flex:1;
}
.showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
工作提琴
fiddle link
关于html - CSS-覆盖特定元素的骨架网格规则,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44880746/