Question

在移动设备上，我希望我的孩子div垂直堆叠。

虽然.content_hover在主要div中，但在移动设备上我希望它显示在它下面。

这是如何实现的？

这是我正在使用的标记

<div class="columns bg_orange small-12 large-4 tile mobile-small-tile">
                    <h2 class="bottom_title no_bg hight_text">Current Patient Information</h2>
                    <div class="content_hover">
                        <p><br>Join us to discuss the IVF process and meet other people on the fertility journey.</p>
                        <a class="more_infos_hover" href="#">Register now ></a>
                    </div>
                </div>

我需要将content_hover置于绝对位置吗？并推下来？

Answer 1

默认情况下，div是＆＃34; block＆＃34;元素和所以＆＃34;兄弟姐妹＆＃34;将垂直堆叠。所以，我想你是在问如何让一个孩子＆＃34; div to stack＆＃34; under＆＃34;它的父母。这很容易通过改变标记来反映你想要产生的结构来实现，这是＃34;兄弟姐妹＆＃34;不是＆＃34;孩子＆＃34;。如果你不能，你可能需要使用相对定位，这将使你的布局取决于内容： - （

Answer 2

如果div.content_hover设置为浮动，并且其中没有任何内容或其后面有clear:both;，并且父div设置为overflow:visible（不是overflow:auto; ），那么父母不应该延伸到覆盖孩子。使用顶部边距将子div放在所需的位置。

Div不垂直堆叠

2 个答案: