塊級元素重疊

HTML和CSS的新手，並嘗試複製網站以獲得一些練習。我在複製airbnb網站上的一個部分時遇到了一些麻煩，它列出了探索，聯繫人和書籍。出於某種原因，我將圖像浮動到左側，我的h3和p標籤不應與圖像重疊。我已經確保將圖像顯示爲塊，但h3和p標籤重疊，我的邊距不起作用。不知道我在做什麼wrong.a塊級元素重疊

感謝

這裏的CSS

.feat-box { 
    background-color: red; 
    float: left; 
    margin-top: 20px; 
    width: 282px; 
} 

.feat-box h3 { 
    font-size: 22px; 
    font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: rgb(57, 60, 61); 
    margin-left: 10px; 
    padding-top: 10px; 
} 

.feat-box p { 
    font-size: 17px; 
    font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: rgb(57, 60, 61); 
    margin-left: 10px; 

} 

.feat-box img { 
    float: left; 
    display: block; 

} 

.feat-box-container { 
    margin: auto; 
    width: 900px; 
}

這裏是我的html

<div class="feat-box-container"> 
       <div class="feat-box"> 
        <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/> 
        <h3>Explore</h3> 
        <p>Find the perfect place.</p> 
       </div> 
       <div class="feat-box"> 
        <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/> 
        <h3>Contacts</h3> 
        <p>Message hosts.</p> 
       </div> 
       <div class="feat-box"> 
        <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/> 
        <h3>Book</h3> 
        <p>View your itinerary.</p> 
       </div> 
      </div>

來源

2014-05-16 Peekay

不知道我關注，但你是否在尋找類似http://jsfiddle.net/j08691/TgHk4/的東西？ – j08691

類似的東西，但圖像應該在左邊，h3和p標籤應該在右邊，而不是在它下面。 – Peekay

嘗試增加

display:inline

您

.feat-box p

你可能不得不邊玩邊緣來讓文字對齊，但它爲我修好了。

如果您的學習CSS我建議安裝螢火蟲，它是一個附加組件，可以幫助您更好地理解CSS如何工作。

來源

2014-05-16 05:34:32 TDsouza

感謝您的回覆！ – Peekay

塊級元素重疊

回答

相關問題