html - 当页面宽度较小时，css float "squeeze"元素

Question

有没有一种方法可以在同一个容器中将两个元素并排 float ，而不会在窗口尺寸减小时将最右边的元素压到下方？相反，我希望窗口覆盖正确的元素。

这是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 -->

谢谢!!

Answer 1

您需要为标题和单元格设置硬宽度:

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; 
}​