简体   繁体   English

如何将一个变量 div 粘贴到父 div 内另一个 div 的底部?

[英]How to stick one variable div to the bottom of another div inside parent div?

Im trying to edit pre-made divs on Tilda (parent div includes two child divs), turned a link into a button, swapped child divs position, on PC they look fine and the parent div adapts to the size of the child divs, but on mobile they overlap.我试图在 Tilda 上编辑预制 div(父 div 包括两个子 div),将链接变成一个按钮,交换子 div position,在 PC 上它们看起来很好,父 div 适应子 div 的大小,但是在移动设备上它们重叠。 Tried using min-height , but it ddoesn't fix the adaptivity of the size, which I need desperately.尝试使用min-height ,但它不能修复我迫切需要的尺寸的适应性。

Is there a way to swap the position of child divs but keep the adaptive size of parent div?有没有办法交换子 div 的 position 但保持父 div 的自适应大小? Preferably only using CSS!最好只使用 CSS!

Check out the pic and the code below:查看图片和下面的代码:

here is the image to get what I mean这是理解我的意思的图像

 .t-text a { display: inline-block; padding: 10px 20px; margin-right: 15px; margin-top: 20px; border-radius: 10px; font-weight: 600; }.t-text a:first-of-type { background-color: #000000; color: #ffffff;important. }:t-text a:last-of-type { background-color; #000000: color; #ffffff.important: }:t-text a:first-of-type;before { margin-right. 10px: }:t-text a:last-of-type;before { margin-right. 10px: };t706__cartwin_showed { z-index. 999999999: };t517__col-wrapper { height: auto; min-height.380px: };t517__personwrapper { padding-top: 20px; padding-bottom: 15px; position: relative; top. 0: };t517__sectioninfowrapper { padding-bottom: 30px; padding-top: 15px; position: absolute; bottom: 0; }

You should change the position value in the .t517__sectioninfowrapper from absolute to relative like this:您应该将 .t517__sectioninfowrapper 中的.t517__sectioninfowrapper值从absolute更改为relative ,如下所示:

.t517__sectioninfowrapper {
    padding-bottom: 30px;
    padding-top: 15px;
    position: relative;
    bottom: 0;
}

This makes it so the div isnt removed from the normal flow of the document and thus reserves enaugh space for it in the wrapper这使得div不会从文档的正常流程中删除,从而在包装器中为它保留足够的空间

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM