0

ウィンドウ サイズが縮小されたときに、一番右の要素が下に押し込まれずに、同じコンテナー内で 2 つの要素を隣り合わせにフロートさせる方法はありますか? 代わりに、適切な要素をウィンドウで覆いたいと思います。

ここにCSSがあります：

#logo {
margin-left: 400px;
float:left; 
}

#loginbox {
margin-top: 15px;
float:left;
height: 70px;
width: 375px; 
}

そしてhtml

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' height=200px width=700x />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
        <br style='clear:both' />
    </div><!-- end header -->

ありがとう！！

4

5 に答える 5

3

ヘッダーとセルにハード幅を設定する必要があります。

http://jsfiddle.net/ByWM2/

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
    </div><!-- end header -->​

.header { width:700px; overflow:hidden; }

#logo {
background:lime;
min-width:300px;
float:left; 
}

#loginbox {
background:cyan;
float:left;
height: 70px;
min-width: 400pxpx; 
}​
于 2012-08-02T20:21:49.163 に答える
0

min-widthforを設定できます#loginbox:

#loginbox {
  margin-top: 15px;
  float:left;
  height: 70px;
  min-width: 200px; /* set this to the max width you'd like it to squeeze to */
  width: 375px; 
}
于 2012-08-02T20:24:05.997 に答える
0

2 つのフロートのうち最大のものを囲む or を配置し、最小にしたい幅を or に設定<div></div>します。height: 70pxmin-width: 200px;

お役に立てれば。

于 2012-08-02T20:24:54.197 に答える
0

soln 1: コンテナー (ヘッダー) の幅または最小幅を、2 つの div の幅が両方とも既知の場合、2 つの div の幅以上に設定します。#logo に幅はありませんが、通常、ロゴには信頼できる (つまり一定の) 幅があると思います。

 #header{width: 900px; /*or whatever*/}

soln 2: css3 プロパティを使用します (IE9+ またはクールなブラウザーのいずれかが必要です: http://caniuse.com/#feat=css-table ):

 #header{display:table}
 #logo, #loginbox{display:table-cell}
于 2012-08-02T20:29:27.260 に答える
0

この問題を解決するにはいくつかの方法があります。

左の列の幅がわかっていると仮定すると、右の列を絶対位置に設定し、左のマージンを左の列の幅の幅に設定して、適切に配置することができます。これを機能させるには、親 div の位置を相対に設定する必要もあります。ここにフィドルがあります：

http://jsfiddle.net/JKXrV/1/

于 2012-08-02T20:32:03.000 に答える