html - float : left not going left

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

由于您要 float 所有 div，因此“Palavra passe:”左侧的 div (Morada para envio se diferente da fiscal:) 的高度大于“N”。 Contribuinte' 导致最后一个 div float 到 'Morada para'。

要解决这个问题，您应该清除它。清除意味着限制 div 不允许任何其他 float 元素靠近它。

为此，将代码更改为:

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

在 CSS 中:

.clear {
   clear: both;
}

就像这个 fiddle https://jsfiddle.net/h7qmyumr/1/

但现在的问题是你不能让任何其他的 div float 到它:为了解决这个问题你可以添加 clear 类到一个空的 div ，这样它将充当 div 组之间的边界。就像在这个 fiddle 中一样:

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