Question

我有以下结果：

如您所见，＆＃34; 立即安装＆＃34;按钮与上面的文本重叠，同时它应与 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;
}

因为文字的长度＆＃34;这个应用程序是新的移动应用程序，它将改变你看待世界的方式。＆＃34;可能会有所不同，我需要一个灵活的解决方案，始终保持 WWW.DOMAIN.COM 和＆＃34; 立即安装＆＃34;按钮在同一行上，但在上面的文本下面。

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

如何解决这个问题？

Answer 1

如果您希望继续使用<span v-else> <button @click="setActivePlan"> {{ isUpgrade ? 'Upgrade' : 'Downgrade' }} </button>，可能有很多方法可以修复它，因此您可以：

float

将#facebook_ad_url {float:left;} #facebook_ad_cta {float:right;}（或overflow: auto;或更多here）添加到其容器中以清除浮动广告。

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

＆＃13;

margin

＆＃13;

#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;
}

＆＃13;

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

<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>

＆＃13;

<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>

＆＃13;

#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;
}

＆＃13;

Answer 2

尝试为包含#facebook_ad_url和#facebook_ad_cta的div提供自己的id / class，并给它一点margin-top。你浮动#facebook_ad_cta，将其从正常的页面流中移除，然后给它一个-40px的margin-top，这会使它向上移动到描述占用的区域。但由于url和cta元素已包含在它们自己的div中，因此可以在上方添加一些空格以防止重叠。

防止子元素浮动到父div之外

2 个答案: