Html 将元件放置在彼此下方

我在使用

CSS

中的

float

将

HTML

中的元素直接放置在彼此下方时遇到问题

我所做的是为我的

div

创建一个容器类，然后在容器内放置一个

按钮

和另一个

div

，两者都使用

CSS

样式

float:right

我所期望的就是这样


实际上发生的是这样的



代码

HTML

JavaScript


JSFiddle

我做了一个测试，以便您可以看到代码的运行

非常感谢您对解决此问题的任何帮助。
请参阅此提琴：


我用
.clearfix
类将按钮包装在一个div中，并将CSS添加到样式表的顶部

此方法确保浮动元素不会影响其下方或周围的元素。
尝试此删除
浮动：右和添加
文本对齐：右用于
.containDebug
和
文本对齐：左用于控制台调试


$（文档）.ready（函数（）{
$（“#控制台_调试”）.hide（）；
$（“#btn_调试”）。单击（函数（）{
event.stopPropagation（）；
$（“#控制台_调试”）.toggle（）；
});
});
$（文档）。单击（函数（）{
if（！$（event.target）.closest（'#console_debug'）.length）{
如果（$（'#控制台_调试'）是（“：可见”））{
$（“#控制台_调试”）.hide（）；
}
}
});
#控制台#调试{
宽度：40vw；
高度：80vh；
溢出y：滚动；
背景色：#FFFFFF；
盒影：-2PX2PX5PX#中交；
文本对齐：左对齐；
前{
单词break：打破一切；
空白：正常；
}
}
.containDebug{
位置：绝对位置；
顶部：5px；
右：5px；
文本对齐：右对齐；
}

D

页面数组
PHP代码中的一些文本
得到
PHP代码中的一些文本
邮递
PHP代码中的一些文本
将“清除：两个；”添加到您的“控制台”调试中
 添加
清除：两者都有
到
#控制台(u debug
最简单的方法是将按钮包装在
中

由于按钮和console DIV都是浮动的，因此它们将相邻显示，而不是一个在另一个上面。通过将两个div作为
.containDebug
的子级，它们都将占据容器元素的全部宽度，因为它们是块级元素


$（“#btn#U调试，#控制台#U调试”）。单击（函数（e）{
e、 停止传播（）；
$（“#控制台_调试”）.toggle（）；
});
#控制台#调试{
显示：无；
宽度：40vw；
高度：80vh；
溢出y：滚动；
背景色：#FFFFFF；
盒影：-2PX2PX5PX#中交；
前{
单词break：打破一切；
空白：正常；
}
}
#btn_调试{
浮动：对；
}
.containDebug{
位置：绝对位置；
顶部：5px；
右：5px；
}

按钮
页面数组
PHP代码中的一些文本
得到
PHP代码中的一些文本
邮递
PHP代码中的一些文本
谢谢。请注意，
display:none
非常棒，但是js代码的其余部分可以在任何地方单击，框仍然会消失。不过还是要谢谢你：）啊，好吧，忽略了那部分。我已经更新了JS来做你提到的事情。
<div class = "containDebug">
    <button id="btn_debug"><p>D</p></button>

    <div id="console_debug">
        <h1>Page Array</h1>
        <pre> Some text from PHP code </pre>
        <h1>GET</h1>
        <pre> Some text from PHP code </pre>
        <h1>POST</h1>
        <pre> Some text from PHP code </pre>
    </div>
</div>

#console_debug {
    float: right;
    width: 40vw;
    height: 80vh;
    overflow-y: scroll;
    background-color: #FFFFFF;
    box-shadow: -2px 2px 5px #CCCCCC;

    pre {
       word-break: break-all;
       white-space:normal;
    }
}

#btn_debug{
    float: right;
}

.containDebug {
  position: absolute;
  top: 5px;
  right: 5px;
}

$(document).ready(function() {
    $("#console_debug").hide();
    $("#btn_debug").click(function() {
        event.stopPropagation();
        $("#console_debug").toggle();
    });
});

$(document).click(function() {
    if(!$(event.target).closest('#console_debug').length) {
        if($('#console_debug').is(":visible")) {
            $('#console_debug').hide();
        }
    }
});