布局，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容器外的内容

回答

相关问题