alignin 2 divs讓一個垂直下降

Question

我有頭痛對齊2個div。我讀過很多教程，其中使用了兩個div，其中一個使用float，另一個使用float。這是我正在使用的代碼。問題是如果瀏覽器調整大小或使用較低的分辨率，div「fotosder」中的圖像將會下降。

這裏是我的代碼：

<li> 
    <div class="holder_slogan"> 
     <p class="slogan"> slogan </p> 


     <div class="social_buttons2"> 
    <div class="inset"> 
     <a class="fb login_button" href="http://xxx.com/facebook?next=xxx"> 
      <span class="logo_wrapper"><span class="logo"></span></span> 
      <span>Facebook</span> 
     </a> 

    </div> 
    <div class="registrate"> 
    <img src="data/images/registrate.png" alt="registrate" /> 
    </div> 
    </div> 

    </div> 

<div class="fotosder"><img src="images/imagen1.jpg" alt="listad" /></div> 
    <div style="clear:both;"></div></li> 


.sp-slider > li { 
    -moz-box-sizing: border-box; 
    float: left; 
    height: 100%; 
    padding: 0 60px; 
    position: relative; 
    text-align: left; 
    transition: opacity 0.4s ease-in 0.8s; 
    width: 20%; 
    z-index: 2000; 
} 

.holder_slogan { 
    float: left; 
    margin: 66px 0 0 18%; 
    width: 387px; 
} 

#board .slogan, #board2 .slogan { 
    float: left; 
    font-size: 12px; 
    line-height: 25px; 
    margin-right: 30px; 
    padding-right: 10px; 
    padding-top: 6px; 
    text-align: left; 
    width: 470px; 
} 

.social_buttons2 { 
    float: left; 
    margin: 0 auto; 
    width: 220px; 
} 

.fotosder { 
    float: right; 
    margin: 5px 18% 0 0; 
    position: relative; 
    width: 329px; 
} 

.sp-slider > li img { 
    -moz-box-sizing: border-box; 
    display: block; 
    max-height: 100%; 
    max-width: 100%; 
    padding: 10px 0; 
} 

img { 
    border-style: none; 
    vertical-align: top; 
} 

Answer 1

這是正常現象。當包裝元件不夠寬以適應兩個浮動元件時，一個將在另一個之下。在這種情況下，右側是浮動的，因爲它在文檔流中是「最後」的。

如果您擔心這個問題，請給出元素寬度的百分比，並且不應該重新排列，除非它們變得非常小或元素的內容阻止它們進一步縮小。