Question

请帮助我了解发生了什么事情。

我有html-相关代码：

#sk_head {
  display: block;
}

.h_title {
  float: left;
}

.h_instr {
  float: right;
  font-size: 12px;
}

#sk_body {
  text-align: center;
  padding: 20px;
  display: block;
}

#skaiciuokle {
  text-align: left;
  display: inline-block;
}

<div id='sk_head'>
  <div class='h_title'>
    <h3>Title</h3>
    <h4>More less important title title</h4>
  </div>
  <div class="h_instr">
    <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
  </div>
</div>

<form action="" method="post">
  <div id='sk_body'>
    <fieldset id="skaiciuokle">
      <table class="data_entry">
        /* table with form for entry data */
      </table>
    </fieldset>
  </div>

我希望页面显示如下所示的所有内容：

但是由于某些原因，父级sk_head的div被忽略，并在h_title和h_inst的div之间竞争。

我完全困惑，因为为另一页设置的几乎相同（<fieldset>级别之间的差异）正在按预期显示所有内容。

我在这里想念的是什么？为什么父div被忽略？

Answer 1

不使用float来为sk_head使用display flex。给出float时元素不再出现。

#sk_head {
    display: flex;
    justify-content: space-between;
}


.h_instr {
   
    font-size: 12px;
}

#sk_body {
    text-align: center;
    padding: 20px;
    display: block;
}

#skaiciuokle {
    text-align: left;
    display: inline-block;
}

<div id='sk_head'>
        <div class='h_title'>
            <h3>Title</h3>
            <h4>More less important title title</h4>
        </div>
        <div class="h_instr">
            <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
        </div>
    </div>
    <form action="" method="post">
        <div id='sk_body'>
           <fieldset id="skaiciuokle">
               <table class="data_entry">
                   /* table with form for entry data */
               </table>
           </fieldset>
        </div>

Answer 2

您正在将容器div显示为block，应将其放置在inline-block（或更妙的是flex）的位置。参见以下修补程序：

#sk_head {
  display:inline-block;
  width:100%;
}

.h_title {
  float:left;
}

.h_instr {
  float:right;
}

#sk_form {
  display:block;
}

<div id='sk_head'>
  <div class='h_title'>
    <h3>Title</h3>
    <h4>More less important title title</h4>
  </div>

  <div class="h_instr">
    <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
  </div>
</div>


<div id="sk_form">
  <form action="" method="post">
    <div id='sk_body'>
      <fieldset id="skaiciuokle">
        <table class="data_entry">
          /* table with form for entry data */
        </table>
      </fieldset>
    </div>
  </form>
</div>

JSFiddle

Answer 3

您可以按照Tanvi所说的使用flexbox，但是如果您希望保留浮动div，则可以在文件中添加以下CSS：

#sk_head::after {
  content: "";
  display: block;
  clear: both;
}

Answer 4

未清除content元素之前的浮动元素。这意味着他们正在使用的空间未与 sk_head 关联，因此 sk_body 可以使用它。

您可以尝试这样的事情：

#sk_head::after { 
  content: "";
  display: block; 
  clear: both;
}

发件人：https://developer.mozilla.org/en-US/docs/Web/CSS/clear

将float设置为子div的值后，父div位置将被忽略

4 个答案: