当页面宽度较小时，css float“squeeze”元素

Question

有没有办法在同一个容器中将两个元素相邻放置，而窗口大小减小时，最右边的元素会被挤压到下面？ 相反，我希望窗口覆盖正确的元素。

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

Answer 2

您可以为#loginbox设置min-width ：

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

Answer 3

放置一个封闭的<div></div> height: 70px或两个浮点数中最大的一个，然后将其设置为min-width: 200px; 或者，再次，你希望最小的宽度。

希望这可以帮助。

Answer 4

soln 1：设置容器（标题）上的宽度或最小宽度等于或大于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}

Answer 5

有几种方法可以解决这个问题，这里有一个：

假设左列的宽度已知，您可以将右列设置为绝对位置，并将其边距设置为左列宽度的宽度，以使其正确定位。 您还必须将父div的位置设置为relative，以使其起作用。 这是小提琴：

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