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 - 覆蓋特定元素的骨架網格規則

回答

相關問題