1

大きなdiv内に2つのdivが含まれているので、それらを並べて配置したいと思います。私のアプローチは、最初のdivを左にフロートさせ、オーバーフローを設定することでした：含まれているdivに非表示にします。何らかの理由で機能せず、2番目のdivが最初のdivの上に表示されます。

Herseはデモ、http：//jsfiddle.net/9xmDP/です。オーバーラップをデバッグするために使用していた色分けがあります。コードも以下にあります。サインアップフォームは、ログインフォームの上ではなく、ログインフォームの横に配置する必要があります。

HTML

<div id="container">    
<div id="signupDiv">
    <div id="signupLabel">
        SignUp
    </div>
    <form id="signupForm">
        User <input type="text" name="user"><BR/>
    </form>
</div>

<div id="loginDiv">
    <div id="loginLabel">
          Login
    </div>            
    <form id="loginForm">
        User <input type="text" name="user"><BR/>
    </form>
</div>

</ p>

CSS

    #container{
    overflow: hidden;
}

#signupLabel{
    border: solid black 1px;
    width: 300px;
}

#signupDiv{
    float:left;
}

#loginLabel{
    border: solid red 1px;
    width: 300px;
    }

#loginDiv{
    width: 300px;
    border: solid pink 1px;
}
4

5 に答える 5

1

あなたもそうする必要がありfloat:left #loginDivます。ここで更新されたフィドルを参照してください：

http://jsfiddle.net/9xmDP/2/

于 2012-12-28T20:14:55.380 に答える
1

要素をフロートすると、その要素は通常のコンテンツフローから削除され、その親要素と親の他の子のコンテンツはすべてその要素をラップしようとします。

したがって、signupDivは実際に左にフロートされ、非フローティングの上に配置されloginDivます。のコンテンツはloginDivをラップアラウンドしようとしsignupDivますが、両方の要素の幅を300ピクセルに指定しているため、そのためのスペースがないため、代わりにフローティングdivの下に配置する必要があります。

最も簡単な解決策は、次のように両方のdivをフロートさせることです。

#signupDiv, #loginDiv {
    float: left;
}
于 2012-12-28T20:16:14.913 に答える
1

両方をフロートにすることで、divを並べて配置できます。コンテナを605pxにすると、divはそこに収まります（境界線を含む）

#container{
    width: 605px;
    overflow: hidden;
}

この

#loginDiv{
    float: left;
    width: 300px;
    border: solid pink 1px;
}
于 2012-12-28T20:16:15.553 に答える
1

Diplay：inlineもここでトリックを行います。http： //jsfiddle.net/9xmDP/4/

#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}
于 2012-12-28T20:17:41.683 に答える
1

このcssを試してください。ここをいじる

#container{
width:604px;
}

#signupLabel{
border: solid black 1px;
width: 300px;
}

#signupDiv{
float:left;
width:300px;
}

#loginLabel{
border: solid red 1px;
width: 300px;
}

#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}

</ p>

于 2012-12-28T20:18:30.187 に答える