CSS - 覆盖特定元素的骨架网格规则

我正在使用骨架网格设计网站& reset css.我现在知道一个容器中的一些规则，我现在知道它与骨架有关。我在网站的每个页面的顶部都有一个图像，每个图像的底部有一个小部分，两端都有一些文字和图标，我似乎无法正确定位。这是它是如何suppossed看 - 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; 
}

来源

2017-07-03 Mike.Whitehead

只需添加下面的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

来源

2017-07-03 08:46:42 LKG

太棒了 - 那工作。非常感谢，这已经诅咒我好几天了。我现在需要做的就是在图标和身体边缘之间以及在人字形和“看得更多”之间添加一些填充（如PSD文件） - 我应该在哪里放置它？ –

'.showreel p {margin-left：10px;}'添加这个来获得图标和内容之间的空间。 – LKG

CSS - 覆盖特定元素的骨架网格规则

回答

相关问题