Question

这应该是非常基本的CSS，但无论我尝试什么，该死的div都不会去它应该的地方！

这是HTML：

<div class="c_container">
<div class="c_title">Registe-se</div>
<form method="post" action="">
    <div class="c_data_container">
        <div class="c_columns">Nome:</div>
        <div class="c_data">
            <input type="text" name="name" value=""  required/>
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">Email:</div>
        <div class="c_data">
            <input type="email" name="email" value=""  required/>
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">Telefone:</div>
        <div class="c_data">
            <input type="text" name="phone" value="" />
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">Morada:</div>
        <div class="c_data">
            <textarea name="address1" ></textarea>
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">Morada para envio se diferente da fiscal:</div>
        <div class="c_data">
            <textarea name="address2" ></textarea>
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">N. Contribuinte:</div>
        <div class="c_data">
            <input type="number" name="fiscal" value="" />
        </div>
    </div>
    <div class="c_data_container">
        <div class="c_columns">Palavra passe:</div>
        <div class="c_data">
            <input type="password" name="password" value=""  required/>
        </div>
    </div>
    <div class="passreq">* A palavra passe deve conter pelo menos um número e/ou letra maiúscula.</div>
<input type="submit" name="addcdata" value="Salvar"/>
</form>
</div>

这就是css：

div.c_container {float:left;width:100%;text-align:left;}
div.c_container .c_title {float:left;width:100%;text-align:center;line-height:35px;font-weight:bold;margin:20px 0;border-bottom:1px solid cor01;}
div.c_container .c_data_container {float:left;width:31%;margin:10px 1%;}
div.c_container textarea, div.c_container input[type=number], div.c_container input[type=text], div.c_container input[type=email], div.c_container input[type=password] {border:0;width:98%;height:20px;background-color:cor09;padding:3px 5px;border-radius:5px;}
div.c_container .passreq {float:left;width:96%;margin:5px 2%;text-align:left;font-size:12px;line-height:16px;}
div.c_container input[type=submit] {float:right;padding:5px;border-radius:0;margin:20px 1% 0 0;}

出于某种原因，它看起来像这样：

密码位于右侧而不是左侧。为什么？我尝试过使用display:inline-block但也没有用。

感谢。

Answer 1

由于你将所有div浮动，所以Palavra passe左边的div（Morada para envio se diferente da fiscal :)：＆＃39;身高超过＆n; N. Contribuinte＆＃39;这导致最后一个div浮动到＆＃39; Morada para＆＃39;。

要解决此问题，您应clear。清除意味着限制div不允许其附近的任何其他浮动元素。

为此，将代码更改为：

<div class="c_data_container clear">
        <div class="c_columns">N. Contribuinte:</div>
</div>

并在CSS中：

.clear {
   clear: both;
}

喜欢这个小提琴https://jsfiddle.net/h7qmyumr/1/

但现在问题是你不能有任何其他div浮出水面：为了解决这个问题，你可以将clear类添加到空div，这样它将充当div组之间的边界。喜欢这个小提琴：

https://jsfiddle.net/h7qmyumr/4/

Answer 2

你错过了c_data_container的高度。看看这个fiddle 特别是缺少高度;这应该足够了：

height: 45px;

如果没有高度，这就是正在发生的事情：

Answer 3

您应该清除前一个元素设置的浮点数。在容器前添加<div style="clear: both;"></div>。请查看以下更新。

body {
  background-color: #f5f5f5;
}
div.c_container {
  float: left;
  width: 100%;
  text-align: left;
}
div.c_container .c_title {
  float: left;
  width: 100%;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
  margin: 20px 0;
  border-bottom: 1px solid cor01;
}
div.c_container .c_data_container {
  float: left;
  width: 31%;
  margin: 10px 1%;
}
div.c_container textarea,
div.c_container input[type=number],
div.c_container input[type=text],
div.c_container input[type=email],
div.c_container input[type=password] {
  border: 0;
  width: 98%;
  height: 20px;
  background-color: cor09;
  padding: 3px 5px;
  border-radius: 5px;
}
div.c_container .passreq {
  float: left;
  width: 96%;
  margin: 5px 2%;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
}
div.c_container input[type=submit] {
  float: right;
  padding: 5px;
  border-radius: 0;
  margin: 20px 1% 0 0;
}

<div class="c_container">
  <div class="c_title">Registe-se</div>
  <form method="post" action="">
    <div class="c_data_container">
      <div class="c_columns">Nome:</div>
      <div class="c_data">
        <input type="text" name="name" value="" required/>
      </div>
    </div>
    <div class="c_data_container">
      <div class="c_columns">Email:</div>
      <div class="c_data">
        <input type="email" name="email" value="" required/>
      </div>
    </div>
    <div class="c_data_container">
      <div class="c_columns">Telefone:</div>
      <div class="c_data">
        <input type="text" name="phone" value="" />
      </div>
    </div>
    <div class="c_data_container">
      <div class="c_columns">Morada:</div>
      <div class="c_data">
        <textarea name="address1"></textarea>
      </div>
    </div>
    <div class="c_data_container">
      <div class="c_columns">Morada para envio se diferente da fiscal:</div>
      <div class="c_data">
        <textarea name="address2"></textarea>
      </div>
    </div>
    <div class="c_data_container">
      <div class="c_columns">N. Contribuinte:</div>
      <div class="c_data">
        <input type="number" name="fiscal" value="" />
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="c_data_container">
      <div class="c_columns">Palavra passe:</div>
      <div class="c_data">
        <input type="password" name="password" value="" required/>
      </div>
    </div>
    <div class="passreq">* A palavra passe deve conter pelo menos um número e/ou letra maiúscula.</div>
    <input type="submit" name="addcdata" value="Salvar" />
  </form>
</div>

带浮动的<div>：左边不离开

3 个答案: