4

問題は、さまざまなサイズのさまざまなフィールドを持つフォームがあることです。各フィールドは、float:left を持つ div 内にあります。そして、それらは自動的に 2 列に分散されます。それらがすべて同じ高さである場合は問題ありませんが、そうでない場合は次のようになります。

float:左の問題

div は青色で選択されています。たとえば、最後のdivが上がる必要があります。そうでない場合、そこにデッドスペースがあり、サイトの他の多くの形式にあるからです。それらは動的な形式であるため、手動で解決することはできません。配置は自動でなければなりません。Stack Overflow とインターネットで検索しましたが、解決策が見つかりませんでした。

これがDivs CSSです

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

そして、一般的な CSS

#popup{
    width:645px;
    height:auto;
    background-color:#e3e3e3;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    border-color:#afafaf;
    padding:15px;
    color:#4d4d4d;
}

#popup #titulo{
    font-size:15px;
    font-weight:bold;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#afafaf;
    padding-bottom:10px;
}

#popup #form #input{
    display:block;
    width:289px;
    margin-top:10px;
}

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

#popup #form .right{
    float:right;
    margin-right:25px;

}

#popup #form #input label{
    font-size:12px;
    font-weight:bold;
}

#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
    font-size:12px;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    width:280px;
    background-color:#f0f0f0;
}

#popup #form #input #foto{
    width:191px;
    height:87px;
    background-image:url(images/img_background.png);
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    border-radius:5px;
}

#popup #form input[type='button']{
    text-align:center;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    font-size:12px;
    color:#4d4d4d;

    -moz-box-shadow:    inset 1px 1px 1px #ffffff;
    -webkit-box-shadow: inset 1px 1px 1px #ffffff;
    box-shadow:         inset 1px 1px 1px #ffffff;
}

#popup #form #input input[type='button']{
    width:82px;
    height:17px;
    margin-left:4px;
    line-height:14px;
}

#popup #form #submit_buttons{
    text-align:right;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#afafaf;
    padding-top:10px;
    margin-top:15px;
}

#popup #form #submit_buttons input[type='button']{
    width:82px;
    height:30px;
}

#popup #form input[type='button']:hover{
    background-color:#cccccc;
    cursor:pointer;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#popup #form #input table{
    width:284px;
    margin-top:2px;
    margin-bottom:5px;
}

#popup #form #input table tr{
    text-align:right;
    vertical-align:top;
}

#datepicker{
    background-image:url(images/datepicker.png);
    background-repeat:no-repeat;
    background-position:right;
}

#popup #form #input textarea{
    height:115px;
    max-height:115px;
    min-height:115px;
    width:275px;
    max-width:275px;
    min-width:275px;
}
4

4 に答える 4

0

私はposition:relative;それらの2つのDIVでインを投げてみます。どんな種類のポジショニングの問題も、通常、明確な位置属性を設定することで修正できることがわかりました。

position:absolute;親の位置を設定するために使用する場合にも役立ちます。それでもうまくいかない場合は、テーブルを過小評価しないでください。人々はそれらをあまり好きではないかもしれませんが、あなたがそれらを使用する方法を知っていれば、それらはこのようなもののためにうまく機能します。

長いですが、私ができる最善のアドバイスです。

于 2012-09-12T22:43:30.243 に答える
0

Multi-column Layout モジュールの仕様はかなり前から存在していましたが、ブラウザの実装が遅かったため、IE はほぼ確実に廃止されました (ただし、IE を弱体化させるのに役立つポリフィルが存在する可能性があります)。

http://www.quirksmode.org/css/multicolumn.html

http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/

これにより、要素が表示される順序が変更されますが、ギャップがなくなることに注意してください。

于 2012-09-12T22:51:41.993 に答える