Question

我无法使用HTML中的float将CSS中的元素直接放在彼此之下。

我所做的是为我的div创建了一个容器类，然后在容器内放置button和另一个div，并使用CSS样式{{1 }}

我预计会发生这种情况。

实际发生的是这个。

守则

HTML 的

float: right;

SCSS

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

的JavaScript

#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;
}

的jsfiddle

我制作了JSFiddle，以便您可以看到代码正在运行。

感谢您解决此问题的任何帮助。

Answer 1

见这个小提琴：

https://jsfiddle.net/tobyl/3s29ta79/

我已将按钮包含在.clearfix类的div中，并将CSS添加到样式表的顶部。

此方法可确保浮动元素不会影响其下方或周围的元素。

Answer 2

请尝试删除text-align:right;并为.containDebug添加text-align:left;，为#console_debug添加$(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(); } } });

＆＃13;

#console_debug {
    width: 40vw;
    height: 80vh;
    overflow-y: scroll;
    background-color: #FFFFFF;
    box-shadow: -2px 2px 5px #CCCCCC;
  text-align:left;
    
    pre {
       word-break: break-all;
       white-space:normal;
    }
}



.containDebug {
  position: absolute;
  top: 5px;
  right: 5px;
  text-align:right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

pip download [package] -d /tmp --no-binary :all:

＆＃13;

Answer 3

最简单的方法是将按钮包裹在<div>。

中

由于您正在浮动两者按钮和控制台DIV，它们将彼此相邻而不是一个在另一个之上。通过将两个DIV作为.containDebug的子节点，它们将占据其容器元素的整个宽度，因为它们是块级元素。

$("#btn_debug, #console_debug").click(function(e) {

  e.stopPropagation();
  $("#console_debug").toggle();

});

#console_debug {
  display: none;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containDebug">

  <div>
    <button id="btn_debug">Button</button>
  </div>

  <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>

另一种选择是清除浮动按钮。

$("#btn_debug, #console_debug").click(function(e) {

  e.stopPropagation();
  $("#console_debug").toggle();

});

#console_debug {
  display: none;
  clear: both;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containDebug">

  <button id="btn_debug">Button</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设置为display: none;来简化您的JS，并让jQuery的toggle()处理它的显示，无论您是否单击按钮或控制台。没有理由用JS隐藏它并测试它的可见性。让jQuery和toggle()为你工作。

Answer 4

添加＆＃34;清除：两者;＆＃34;到#console_debug。 http://www.w3schools.com/cssref/pr_class_clear.asp

Answer 5

将clear: both;添加到#console_debug

将元素置于彼此之下

5 个答案: