css在頁面寬度較小時浮動「擠壓」元素

有沒有辦法在同一個容器中將兩個元素相鄰並排放置，而不會在窗口大小減小時將最右邊的元素擠壓到下方？相反，我希望正確的元素被窗口覆蓋。css在頁面寬度較小時浮動「擠壓」元素

這裏的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 -->

謝謝！

來源

2012-08-02 kidA

我想你想要做的是設置寬度爲％，而不是什麼PX ......這樣，它應該規模。 – aserwin 2012-08-02 20:21:04

我們在談論哪兩個要素？兩個登錄框或登錄div和標誌？ – 2012-08-02 20:25:22

需要設置一個硬寬度爲頭和該細胞：

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-02 20:21:49 Lowkase

非常感謝你！這解決了這個問題。我需要爲標題設置一個固定的寬度。 – kidA 2012-08-02 22:26:32

可以設置min-width爲#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-02 20:24:05

把一個包圍<div></div>的height: 70px或任何最大的兩個浮動是，然後將它設置爲min-width: 200px;或，ag ain，無論你想要的最小寬度如何。

希望這會有所幫助。

來源

2012-08-02 20:24:54 Mackey18

SOLN 1：設置寬度或在容器（標題）最小寬度比所述2周的div 如果那些2都是已知的寬度的寬度等於或更大。您在#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-02 20:29:27 Faust

有解決這個問題的一些方式，這裏有一個：

假設左列的寬度已知，可以將右列設置爲絕對位置，並將其左邊的寬度設置爲左列寬度的寬度，以便正確定位。您還必須將父div的位置設置爲相對才能使其工作。這裏的小提琴：

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

來源

2012-08-02 20:32:03 Sammy

css在頁面寬度較小時浮動「擠壓」元素

回答

相關問題