Question

我正在尝试编写一个简单的联系人框。不幸的是我无法正确布局，对齐错误，“联系内容”文本+图像位于第二个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@company.com
    </p>
  </div>
</div>

Answer 1

您需要移除float: left;和.contact-content-text

上的.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@company.com
    </p>
  </div>
</div>

Answer 2

您需要将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@company.com
    </p>
  </div>
</div>

布局，div容器外的内容

2 个答案: