将div定位到另一个div的底部并针对移动设备进行优化
[英]Positioning div to the bottom of another div and optimizing for mobile
问题描述
Simply put, I am somewhat struggling to position a div at the bottom (on the floor) of another. 
简而言之，我正在努力将div放置在另一个div的底部（在地板上）。 position: absolute just makes the div overflow the page! position: absolute会使div溢出页面！
Here's how I want each block to look: 这是我希望每个块的外观：
I've nearly got there (nearly!), but the content in the white div, is positioned at the top: 我快到了（差不多！），但是白色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 pa { 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>
I need all three of them to appear on one row when screen is full sized, (how it appears now): 当屏幕全屏显示时（现在的显示方式），我需要将它们全部三个显示在一行上：
Then when the screen resizes (to mobile), I want one to appear, then another below it (so on). 然后，当屏幕调整大小（移动）时，我希望一个出现，然后在其下方出现另一个（依此类推）。 How it appears now on mobile: 现在如何在移动设备上显示：
Any help/advice would be appreciated! 任何帮助/建议将不胜感激！
2 个解决方案
解决方案1
0 已采纳 2018-04-11 11:06:25
Is this what you want? 这是你想要的吗？
If so, you were almost there. 如果是这样，您就快到了。
You were basically missing two things: 您基本上错过了两件事：
Positioning at the bottom using
position: absolute; bottom: 0; left: 5%;使用以下position: absolute; bottom: 0; left: 5%;定位在底部position: absolute; bottom: 0; left: 5%;position: absolute; bottom: 0; left: 5%;.。 To make this work, you need to make sure the parent container is positioned, which means it has a different value for positionthan the defaultstatic.为此，您需要确定父容器的位置，这意味着它的position值与默认的static。 That's why I gave itposition: relative;这就是为什么我给它position: relative;.。 You need a so-called media query to change styles based on viewport width.
您需要一个所谓的媒体查询来根据视口宽度更改样式。 I adjusted your parent container to take full width if viewport has less than 481px width. 如果视口的宽度小于481px，我将父容器调整为全角。
.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 pa { 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>
解决方案2
0 2018-04-11 11:13:08
* { -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 pa { 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将div放置在另一个div的底部 - positioning a div at bottom of another div
将div定位在另一个div的底部附近 - Positioning a div near bottom side of another div
将div定位到父div的底部 - positioning div to bottom of parent div
将div定位在“绝对”的底部<div> - Positioning a div at the bottom of a “absolute” <div>
在没有指定高度的情况下将div放置在另一个div的底部 - Positioning a div at bottom of another div without specified height
将 div 定位在内容 div 的底部 - Positioning a div at the bottom of content div
定位到动态div的底部 - Positioning to bottom of dynamic div
将div定位在底部内联 - Positioning div at bottom inline
将div定位在页面底部 - Positioning div at the bottom of the page
将div定位在页面底部 - Positioning div at the bottom of the page
相关标签