将div定位到另一个div的底部并针对移动设备进行优化

时间：2018-04-11 11:03:19

标签： html css

简单地说，我有点努力在另一个人的底部（在地板上）放置一个div。 position: absolute只是使div溢出页面！

以下是我希望每个块看起来的方式：

enter image description here

我几乎到了那里（差不多！），但白色div中的内容位于顶部：

.span4.widget-span.widget-type-custom_widget {
  display: inline-block;
  margin: 10px;
  width: 31%;
  text-align: center;
}

.cta-text {
  width: 90%;
  margin: 0 auto;
  background-color: #ffffff;
}

.clearfix.cta-wrapper {
  height: 300px;
}

.cta-wrapper p a {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #f4a244;
  text-transform: uppercase;
  text-decoration: underline;
}
<div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>
<div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>
<div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>

当屏幕尺寸齐全时，我需要将它们全部三个显示在一行上（现在如何显示）：

enter image description here

然后当屏幕调整大小（移动）时，我想要一个出现，然后另一个出现（等等）。它现在如何出现在手机上：

任何帮助/建议将不胜感激！ enter image description here

2 个答案:

答案 0 :(得分：0)

这是你想要的吗？

如果是这样，你几乎就在那里。

你基本上缺少两件事：

  1. 使用position: absolute; bottom: 0; left: 5%;在底部定位。要使其工作，您需要确保父容器已定位，这意味着它与position的值不同于默认static。这就是我给它position: relative;的原因。

  2. 您需要一个所谓的媒体查询来根据视口宽度更改样式。如果视口的宽度小于481px，我调整了您的父容器以获取全宽度。 

    3. .span4.widget-span.widget-type-custom_widget {
  display: inline-block;
  margin: 10px;
  width: 31%;
  text-align: center;
  /* changed styles after this */
  position: relative;
}

/* adjustment for mobile */
@media screen and (max-width: 480px) {
  .span4.widget-span.widget-type-custom_widget {
    width: calc(100% - 20px);
  }
}

.cta-text {
  width: 90%;
  background-color: #ffffff;
  /* changed styles after this */
  position: absolute;
  bottom: 0;
  left: 5%;
}

.clearfix.cta-wrapper {
  height: 300px;
}

.cta-wrapper p a {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #f4a244;
  text-transform: uppercase;
  text-decoration: underline;
}
    <div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>
<div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>
<div class="span4 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="4">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_1523442726463138" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"><div class="clearfix cta-wrapper" style="background-image:url('https://cdn2.hubspot.net/hubfs/169013/Email/Template/ty-cta.png?t=1523436793010');">
        <div class="cta-text">
            <h4>Article title goes here lorem ipsum dolor sit amet rhonc us tellus non.</h4>
            <div class="fake-button"><a href="#"></a><p><a href="#"></a><a href="#" target="_blank">Read more</a></p></div>
        </div>
</div>


</span></div>
  <!--end layout-widget-wrapper -->
</div>

答案 1 :(得分：0)

compile 'com.google.android.gms:play-services-ads:12.0.1'

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.widget-span {
  width: 33.33%;
  float: left;
  padding: 0 10px 20px;
  text-align: center;
  position: relative;
}

.widget-span .cta-wrapper {
  position: relative;
  height: 300px;
}

.cta-text {
  width: 90%;
  margin: 0 5%;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cta-wrapper p a {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #f4a244;
  text-transform: uppercase;
  text-decoration: underline;
}

/* this media query is form mobile */
@media only screen and (max-width: 767px){
  .widget-span {
    width: 100%;padding: 0 0 20px;
  }
}

相关问题
最新问题