1

jquery/ajaxを介して3つのフォームを処理するための簡単なページを作成しました。すべてが正常に機能しますが、どういうわけか、この単純なCSSの問題をデバッグできないようです。親DIVがあり、その中に3つのDIVがあり、それぞれにフォームと、フォームが送信されたときの関連する成功メッセージが含まれています。誰かがそれを見ることができれば、私は本当にそれをいただければ幸いです。ここで見つけることができます（LINK）。スタイルシートはソースを通して見ることができ、本当にシンプルです。以下にページアーキテクチャの要点と私が書いたCSSのビットを含めました。

HTML

<div id="wrap">

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

</div>

CSS

#wrap{
    width:900px;
    height:450px;
    margin:25px;
    padding:0;
    }

div.form-container {
    background:#9c9;
    width:300px;
    height:100%;
    float:left;
    position:relative;
    padding:0;
    }

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

form {
    background:#999;
    float:left;
    position:relative;
    padding:10px;
    }

2番目と3番目のフォームコンテナの上部に19pxの余白があることに気付くでしょうが、これはCSSのどこにも反映されていません。私はこれを何時間も無駄にデバッグしようとしてきました。単純なものに違いないことを知っているので、助けを求めるのはほとんど恥ずかしいことです。問題を見つけるために事実上すべての要素を移動しましたが、何も変わりません！負のマージンを使用して2つのコンテナーを引き上げることで機能させることができますが、そのような修正は必要ないと思います。

ご覧いただきありがとうございます、

マイク

4

2 に答える 2

2

これが唯一の問題ではないかもしれませんが、成功divのIDはありますが、cssは成功クラスを呼び出しています。

<div id="success">

そしてあなたのCSSは

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

HTMLを次のように変更します

<div class="success">

編集：

テキストページでは、BRsの後にdivsがあります。それらを削除し、すべてが並んでいます。

于 2012-04-15T22:07:54.017 に答える
2

<br>それぞれの間のタグが<div class="form-container">マージンの原因だと思います。

于 2012-04-15T22:12:01.147 に答える