佈局，div容器外的內容

-3

我想編碼一個簡單的聯繫方式。不幸的是，我不能得到正確的佈局，路線是錯誤的，「接觸的內容」文本+圖像是第二個div容器外...佈局，div容器外的內容

這裏我到目前爲止的代碼：

div.contact { 
 
    border: 1px solid black; 
 
} 
 

 
div.contact-heading { 
 
    border-bottom: 1px solid black; 
 
    padding: 11px 20px; 
 
} 
 

 
.contact-heading-icon { 
 
    float: right; 
 
} 
 

 
.contact-content { 
 
    padding: 11px 20px; 
 
} 
 

 
.contact-content-text { 
 
    float: left; 
 
    margin-left: 200px; 
 
} 
 

 
.contact-content-image { 
 
    width: 170px; 
 
    height: auto; 
 
    float: left; 
 
}

<div class="contact"> 
 
    <div class="contact-heading"> 
 
    <p class="contact-heading-text">Kontakt</p> 
 
    <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" /> 
 
    </div> 
 
    <div class="contact-content"> 
 
    <img src="../images/img-contact-person.png" alt="" class="contact-content-image" /> 
 
    <p class="contact-content-text">Your Contact<br><br> 
 
     <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> [email protected] 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-06-17 user838531

的[爲什麼圖像溢出包裝之外？]（https://stackoverflow.com/可能的複製問題/ 40157754 /爲什麼圖像溢出 - 包裝外） – Rob

你是什麼意思「對齊是錯誤的」？你需要告訴我們什麼是錯的，你期望什麼。 –

像rob說的那樣，由於「clearfix」問題，您的聯繫信息在父母之外。有很多方法可以解決這個問題，包括搶劫鏈接。 https://codepen.io/mcoker/pen/bRgLbR –

您需要刪除.contact-content-text的float: left;和.contact-content-image

div.contact { 
 
    border: 1px solid black; 
 
} 
 

 
div.contact-heading { 
 
    border-bottom: 1px solid black; 
 
    padding: 11px 20px; 
 
} 
 

 
.contact-heading-icon { 
 
    float: right; 
 
} 
 

 
.contact-content { 
 
    padding: 11px 20px; 
 
} 
 

 
.contact-content-text { 
 
    margin-left: 200px; 
 
} 
 

 
.contact-content-image { 
 
    width: 170px; 
 
    height: auto; 
 
}

<div class="contact"> 
 
    <div class="contact-heading"> 
 
    <p class="contact-heading-text">Kontakt</p> 
 
    <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" /> 
 
    </div> 
 
    <div class="contact-content"> 
 
    <img src="../images/img-contact-person.png" alt="" class="contact-content-image" /> 
 
    <p class="contact-content-text">Your Contact<br><br> 
 
     <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> [email protected] 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-06-17 18:35:36

您需要添加display: inline-block到.contact-content

div.contact { 
 
    border: 1px solid black; 
 
} 
 

 
div.contact-heading { 
 
    border-bottom: 1px solid black; 
 
    padding: 11px 20px; 
 
} 
 

 
.contact-heading-icon { 
 
    float: right; 
 
} 
 

 
.contact-content { 
 
    padding: 11px 20px; 
 
    display: inline-block; 
 
} 
 

 
.contact-content-text { 
 
    float: left; 
 
    margin-left: 200px; 
 
} 
 

 
.contact-content-image { 
 
    width: 170px; 
 
    height: auto; 
 
    float: left; 
 
}

<div class="contact"> 
 
    <div class="contact-heading"> 
 
    <p class="contact-heading-text">Kontakt</p> 
 
    <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" /> 
 
    </div> 
 
    <div class="contact-content"> 
 
    <img src="../images/img-contact-person.png" alt="" class="contact-content-image" /> 
 
    <p class="contact-content-text">Your Contact<br><br> 
 
     <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> [email protected] 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-06-17 18:38:20

佈局，div容器外的內容

回答

相關問題