4 つの div 領域を配置しようとしている Web ページに取り組んでいます。
- 入力 - ユーザーはフォームのここにデータを入力できます
- output - 出力はここに表示されます (php からのエコー)
- sumbit - フォームデータの送信に使用できる送信ボタンが含まれています
- 保存 - このセクションには、出力セクション データを保存\電子メールで送信するために使用できる保存ボタンが含まれています
以下のコードを使用して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 を削除しようとすると、問題が発生します。