防止子元素漂浮在父元素之外 div

Question

我得到以下结果：

如您所见，“立即安装”按钮与上面的文本重叠，而它应该与 WWW.DOMAIN.COM 对齐 元素。

这里是 html:

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div>

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

这里是 CSS:

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  padding: 5px 10px 10px 10px;
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  float: right;
  margin: -40px 10px 10px 10px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

因为文本 "This app is the new mobile app that will change the way you see the world." 的长度可能会有所不同，我需要一个灵活的解决方案，始终保持 WWW.DOMAIN.COM 和“立即安装”按钮位于同一行，但在上面的文本下方。

我尝试使用 clearfix、overflow 和 display:inline-block，但无法找到解决此布局问题的方法。

如何解决这个问题？

Answer 1

可能有很多方法可以修复它，如果您更愿意继续使用 float，那么您可以：

#facebook_ad_url {float:left;}
#facebook_ad_cta {float:right;}

并将overflow: auto;（或hidden，或更多here）添加到容器中以清除浮动。

最后，删除按钮上不必要的 margin 值。

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  padding: 5px 10px 10px 10px;
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
  float: left; /*added*/
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  float: right;
  /* margin: -40px 10px 10px 10px; */
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div style="overflow: auto;">

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

此外，现代CSS3 flexbox可以轻松干净地解决它。

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div id="facebook_ad_url">WWW.DOMAIN.COM</div>
  <div id="facebook_ad_cta">Install Now</div>
</div>

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  margin-left: 10px;
  /* padding: 5px 10px 10px 10px; */
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  /* float: right; */
  /* margin: -40px 10px 10px 10px; */
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center;">

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

Answer 2

尝试给包含 #facebook_ad_url 和 #facebook_ad_cta 的 div 自己的 id/class 并给它一点 margin-top。您正在浮动 #facebook_ad_cta，这会将它从正常页面流中移除，然后给它一个 -40px margin-top，这会导致它向上移动到描述所占据的区域。但是由于 url 和 cta 元素已经包含在它们自己的 div 中，您可以在上面添加一些 space 以防止重叠。

防止子元素漂浮在父元素之外 div

Prevent children element from floating outside of parent div

html

css

layout

alignment