1

この質問に対する答えを探して、たくさんのスタックオーバーフローを読みました。誰もが 、 、 、 などを使用すると言いますfloat: leftがfloat:right、overflow: hiddenどれdisplay: blockも私にとってはうまくいきません。マージンと関係があると思いますが、いじってみましたが、答えが見つかりません。

ウェルカム メッセージを 2 つの div の左側に表示したいと考えています。基本的には、twitter のホームページ (www.twitter.com) をコピーしようとしています。

フィドル: http://jsfiddle.net/CuwA6/

HTML:

<body>          
     <div id="content">
        <div id="welcome">
            <h1>Welcome!</h1>
            <h2>Blah blah blah...</h2>
        </div>

        <div id="login">
        <form>
            <h3>Please Sign In</h3>
            <input type="text" name="email" placeholder="Username or Email" /><br/>
        <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign In" />
        </form>
        </div>

        <div id="signup">
        <form>
            <h3>Sign up</h3>
            <input type="text" name="name" placeholder="Full Name" /><br/>
        <input type="text" name="email" placeholder="Email" /><br/>
            <input type="text" name="password" placeholder="Password" /><br/>
            <input type="submit" value="Sign Up" />
        </form>
        </div>
    </div>

    <div id="bird">
       <img alt="" src="img/Bird.png" />
</div>

CSS:

body {
    background: url(img/picture2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
}
#login, 
#signup {
    margin: 10px 50%;
    background-color: #F0F0F0;
    padding: 0px 25px 25px 15px;
    border: 1px solid;
    border-radius: 15px;
    width: 300px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}
#bird {
    z-index: 0;
    position: fixed;
    bottom: 0px;
    left: 0px;
}
input {
    margin: 3px 0px;
    padding: 5px;
    width: 100%;
}
4

3 に答える 3

4

ウェルカム div を左にフローティングすると、他の div の左に移動します。

#welcome {
    margin: 0 30%;
    text-align: center;
    vertical-align: middle;
    float:left;
}

jsFiddle の例

于 2013-08-28T02:34:26.987 に答える
2

以下のように、ウェルカム メッセージを削除しmarginて追加してみてください。float:left

#welcome {
    float:left;
    width: 40%; //added as an edit to the answer based on feedback
    text-align: center;
    vertical-align: middle;
}

更新されたデモ

注:削除marginはオプションです。ただし、これを行うと、テキストの一部が の下に隠れないようにすることができますlogin div。

于 2013-08-28T02:38:20.957 に答える
2

この問題を解決するには、サインイン/アップ フォームの両方を含む新しい div を作成し、コンテンツ用に 2 つの列/チャネルを作成します (左側にウェルカム、右側にフォーム)。ここで元の jsFiddle をフォークし、見苦しい背景色を追加して、各 DIV の開始位置と終了位置を明確にしました。特に、他の方法では「見えない」DIV や float を使用している場合、派手な背景色を追加すると、物事がどこに着地/開始/終了するかを把握するのに役立つことがよくあります。

この例では、#welcomeDIV を更新し、以下も追加しました。

#welcome {
    background:green;
    float:left;
    width:35%;
    text-align: center;
    vertical-align: middle; }
#form-boxes {
    background:orange;
    float:left;
    width:65%; }
于 2013-08-28T02:56:41.550 に答える