當頁面寬度較小時，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/