0

私が構築しているこのサイトに問題があります。margin-left および margin-right auto を実行できるように、固定幅が必要です (「左ウィンドウ」のフォーム項目を中央に配置します。問題は、このコードをモジュール化して、将来的にも機能するようにしようとしていることです。フォームも作成することにしました。つまり、フォームに必要なフィールドの数に応じて、可変の高さが必要です。

上記のステートメントを明確にするために、固定幅を維持し、高さを可変にしようとしています (min-height を使用)。問題は、背景色と div の境界線が div のサイズに合わせて縮小または拡大しないことです。何か案は?

サイトはこちら: http://traelid.com/news/createNews.php

ここに私のフォームコードと私のCSSコードがあります:

形:

<script type='text/javascript' src='../nicEdit/nicEdit.js'></script>
<script type='text/javascript'>
    bkLib.onDomLoaded(function() {nicEditors.allTextAreas() });
</script>

<div class='frmcontainer'>

    <div class='title'>TraeLid News</div>

  <div class='fill'>

        <div class='row'>

            <div class='frm lbl'>
                <label for='author'>Author:</label>
            </div>

            <div class='frm itm'>
                Auto Author
            </div>

        </div>

        <div class='row'>

            <div class='frm lbl'>
                <label for='subject'>Subject:</label>
            </div>

            <div class='frm itm'>
                <input class='itm itmtxt' type='text' name='subject' />
            </div>

        </div>

        <div class='row'>

            <div class='frm lbl'>
                <label for='content'>Content:</label>
            </div>

            <div class='frm itm txtarea' style='background-color:#fff;'>
              <textarea class='itm itmtxtarea ckeditor' name='content'></textarea>
          </div>

        </div>

        <div class='row'>

            <div class='frm lbl'>
                <label for='tags'>Tags:</label>
            </div>

            <div class='frm itm'>
                <input class='itm itmtxt' type='text' name='tags' />
            </div>

        </div>

  </div>


</div>

CSS:

 .frmcontainer
    {

    text-align:center;

    width:750px;
    min-height:200px;
    margin-left:auto;
    margin-right:auto;

    border-radius:10px;
    border-width:1px;
    border-style:solid;

}

.frm
{
    margin:5px;
}


.title
{
    clear:both; 

    width:750px;

    margin-bottom:24px;

    font-size:28px;
    font-weight:bold;
    text-decoration:underline;
    font-variant:small-caps;

}

.row
{
    width:750px;
    height:auto;

    float:left;
    clear:both;
}

.lbl
{   
    font-size:18px;
    font-weight:bold;

    text-align:left;

    height:30px;
    width:150px;

    float:left;

}

/*Container and input styles*/

.itm
{
    text-align:left;

    height:25px;
    width:580px;        

    float:left;
}

.itmtxt
{
    width:576px;

    border-style:solid;
    border-width:1px;
}

.txtarea
{
    height:400px;
}

.itmtxtarea
{
    width:578px;

    height:343px;

    border-style:solid;
    border-width:1px;
}
.nicEdit-panel 
{     
    background-color: #eee;
}
.nicEdit-selected 
{     
    background-color: #fff;
    word-wrap:break-word;;
    overflow:hidden;
}
.nicEdit-main
{
    word-wrap:break-word;
    overflow:hidden;
    max-height:343px;
}
4

1 に答える 1

1

.frmcontainer に追加しoverflow: hidden;ます。フィドル・エクス

于 2012-06-17T16:35:03.247 に答える