使用CSS正確對齊HTML DIV部分

Question

我正在一個網頁上嘗試布置4個div區域。

1. 輸入-用戶可以在此處以表格形式輸入數據
2. 輸出-輸出將顯示在這里（從php回顯）
3. sumbit-包含一個可用於提交表單數據的提交按鈕
4. 保存-該部分包含一個保存按鈕，可用於保存\\通過電子郵件發送輸出部分數據

我正在使用下面的代碼來創建html：

<div class="input">

        INPUT
</div>

<div class="output">

             OUPUT
</div>

<div class="submit">

          SUBMIT
</div>              

<div class="save">

SAVE

</div>

和CSS代碼：

.input{

width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.output{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
    margin-bottom:10px;

}


.submit{
width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.save{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;

 margin-bottom:10px;

}

如果所有的div部分都具有數據，則它們可以正確對齊。但是在這里，由於output div區域是從php腳本獲取數據（回顯值），因此最初將沒有任何內容可以顯示。由於divs不能正確對齊。 sumbit div將占據output div區域。

我該如何解決？ 即使輸出中沒有數據，我也需要堅持submit div 。

我在這里設置了一個小提琴。 LINK（如果您嘗試從輸出div部分中刪除OUPUT），則會看到問題

Answer 1

如果你想顯示.submit 總是低於.input ，使用clear:both對.submit 。

小提琴： http : //jsfiddle.net/Qpc6F/1/

（順便說一句，我在.output上使用display:none來產生空內容的效果。在您的代碼中將其刪除。）

Answer 2

如果您仍然想在輸出div上顯示邊框而又不顯示任何數據，則只需輸入  在div中使用content屬性

.output:before{
    content:"\00a0";
}

Answer 3

通過min-height：20px;`overflow：hidden; 在.output類中。 實際上，可以將此屬性傳遞給每個類。