28

これは私のコードです（ここでフィドルを参照してください）：

<div class='container'>
    <div class='hero-unit'>
        <h2>Welcome</h2>

        <p>Please log in</p>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
    </div>
</div>

と同じ高さ#login-boxになりたいです。私は使用できますが、それは間違っていると感じています。.pull-rightpmargin-top: -100px

ネガをハードコーディングせず#login-boxに と同じ高さにするにはどうすればよいですか?pmargin-top

4

3 に答える 3

57

フロート要素は、通常レイアウトにある線でレンダリングされます。これを修正するには、2つの選択肢があります。

ログインボックスの後にヘッダーとpを移動します。

<div class='container'>
    <div class='hero-unit'>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

または、左側のブロックを左側のプルdivで囲み、下部にクリアフィックスを追加します

<div class='container'>
    <div class='hero-unit'>

        <div class="pull-left">

          <h2>Welcome</h2>

          <p>Please log in</p>

        </div>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <div class="clearfix"></div>

    </div>
</div>
于 2013-01-19T16:58:40.037 に答える
3

#login-box前に置いただけ<h2>Welcome</h2>で大丈夫です。

<div class='container'>
    <div class='hero-unit'>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

こちらがjsfiddlehttp : //jsfiddle.net/SyjjW/4/です。

于 2013-01-19T16:58:19.503 に答える
0

h2を上部に保持してから、pを左にプルし、ログインボックスを右にプルします。

<div class='container'>
  <div class='hero-unit'>

    <h2>Welcome</h2>

    <div class="pull-left">
      <p>Please log in</p>
    </div>

    <div id='login-box' class='pull-right control-group'>
        <div class='clearfix'>
            <input type='text' placeholder='Username' />
        </div>
        <div class='clearfix'>
            <input type='password' placeholder='Password' />
        </div>
        <button type='button' class='btn btn-primary'>Log in</button>
    </div>

    <div class="clearfix"></div>

  </div>
</div>

フロートボックスのデフォルトの垂直方向の配置はベースラインであるため、「ログインしてください」は「ユーザー名」と正確に一致します（プル右をプル左に変更して確認してください）。

于 2013-01-19T17:11:35.827 に答える