CSS元素將內容向下推

我在我的網站上有3個元素，它們以一個圖標開頭，我用CSS在懸停時進行了動畫處理。但是當我徘徊時，整個部分都被推下去了。我只希望影響圖標。這可能是一個定位的事情，但我已經嘗試了幾件我知道的事情，但似乎沒有任何事情按我希望的方式工作。順便說一下，該網站是使用Bootstrap構建的，但這可能不是我的問題的一部分。CSS元素將內容向下推

該網站可以在這裏看到：http://www.vielendank.dk/bootstrap （中途下 - 藍色部分）

的HTML看起來像這樣：

<div class="span4 text-center"> 
<div class="komp"><div class="komp-ikon"> 
<i class="icon-pencil"></i></div> 
<h4>Grafisk design</br>og rentegning</h4></br> 
Vi elsker design! Grafisk design og rentegning er vielen danks absolutte 
spidskompetence – vi vil gå så vidt som at kalde os selv for nørder. 
</div></div>

的CSS是這樣的：

.komp{ 
display: block; 
} 

.komp-ikon{ 
font-size: 40px; 
color:#007fa7; 
padding-top: 20px; 
background-color: white; 
width: 80px; 
height: 60px; 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 20px; 
-moz-border-radius: 6%;-khtml-border-radius: 6%;-webkit-border-radius: 6%;border-radius: 6%; 

-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

-moz-transition: all 0.2s ease-in; 
-webkit-transition: all 0.2s ease-in; 
-o-transition: all 0.2s ease-in; 
transition: all 0.2s ease-in; 
-ms-transition: all 0.2s ease-in;} 

.komp:hover .komp-ikon{ 
color: #41ab29; 
font-size: 60px; 
padding-top: 20px; 
background-color: white; 
width: 100px; 
height: 80px; 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 20px; 
-moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%; 


-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);} 

.komp:hover h4{ 
color:#41ab29; 
font-family: 'Montserrat Alternates', sans-serif; 
font-weight: 400; 
margin-bottom: 0px; 
padding-bottom: 0px;}

謝謝你們......

來源

2013-07-09 Kasper Lægård

簡單地給那個div af ixed高度：

.section.blue { 
    height: 350px; 
}

或者，如果你想選擇更具體：

.section.blue .container .row { 
    height: 270px; 
}

來源

2013-07-09 07:01:56

嗨塞繆爾。當圖標懸停時，這仍然會將標題和文本向下移動（即使您是對的 - 下一部分未移動）。 –

試試這個：

CSS

.komp { 
     display: block; 
     padding: 100px 0 0; 
    } 

    .komp-ikon { 
     font-size: 40px; 
     color:#007fa7; 
     padding-top: 20px; 
     background-color: white; 
     width: 80px; 
     height: 60px; 
     margin: 0 0 0 -40px; 
     -moz-border-radius: 6%; 
     -khtml-border-radius: 6%; 
     -webkit-border-radius: 6%; 
     border-radius: 6%; 
     position: absolute; 
     top: 20px; 
     left: 50%; 

     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

     -moz-transition: all 0.2s ease-in; 
     -webkit-transition: all 0.2s ease-in; 
     -o-transition: all 0.2s ease-in; 
     transition: all 0.2s ease-in; 
     -ms-transition: all 0.2s ease-in; 
    } 

    .komp:hover .komp-ikon { 
     color: #41ab29; 
     font-size: 60px; 
     padding-top: 20px; 
     background-color: white; 
     width: 100px; 
     height: 80px; 
     margin-left: auto; 
     margin-right: auto; 
     margin-bottom: 20px; 
     -moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%; 


     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);} 

     .komp:hover h4{ 
     color:#41ab29; 
     font-family: 'Montserrat Alternates', sans-serif; 
     font-weight: 400; 
     margin-bottom: 0px; 
     padding-bottom: 0px; 
    }

HTML

<div class="span4 text-center"> 

    <div class="komp"> 

     <div class="komp-ikon"> 
      <i class="icon-pencil"></i> 

     </div> 

     <h4>Grafisk design</br>og rentegning</h4></br> 
     Vi elsker design! Grafisk design og rentegning er vielen danks absolutte 
     spidskompetence – vi vil gå så vidt som at kalde os selv for nørder. 

    </div> 

</div>

我對它進行了絕對定位，然後填充內容容器以便它不會落在按鈕後面。

不知道你要去哪裏使用這一點，但它可能是值得檢查到僅按鈕創建一個保持容器，使其更靈活:)

來源

2013-07-09 07:10:00 thatgerhard

嗨thathardhard - 感謝您的意見。這並沒有訣竅。當圖標懸停時，它仍然向下移動標題，文本和藍色部分，圖標將在列的左側移動。 HTML看起來和我的完全一樣，我試圖根據你的建議來改變CSS？任何想法？ –

您是否添加了位置：絕對; top：20px;剩下：50％;到.komp-ikon類？ – thatgerhard

我解決了這個問題我addede一個

.komp{postition: absolute;}

由於某種原因，您需要將此元素定位到此元素中。現在唯一的事情就是圍繞那些無法使用margin-left/right：auto的圖標進行對中，但我希望能找到一個。

感謝您的意見...

來源

2013-07-10 05:40:42

CSS元素將內容向下推

回答

相關問題