Размещение div в нижней части другого div и оптимизация для мобильных устройств

Проще говоря, я несколько изо всех сил пытаюсь разместить 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

0
0
66
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это то, что вы хотите?

Если так, то вы почти у цели.

По сути, вам не хватало двух вещей:

  1. Позиционирование снизу с помощью position: absolute; bottom: 0; left: 5%;. Чтобы это работало, вам необходимо убедиться, что родительский контейнер расположен, что означает, что он имеет другое значение для position, чем значение по умолчанию static. Вот почему я дал ему position: relative;.

  2. Вам нужен так называемый медиа-запрос для изменения стилей в зависимости от ширины области просмотра. Я настроил ваш родительский контейнер на полную ширину, если ширина области просмотра меньше 481 пикселей.

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

* {
  -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;
  }
}
<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>

Другие вопросы по теме