流體div，一個與圖像排隊？

我想讓這個佈局有點流暢。我希望#logo位於#infobot的右下方，其大小由我想要通過瀏覽器窗口縮放的圖片確定。 #white應該掩蓋#logo左側的內容。如何讓#white和#logo排列成彼此相鄰並仍然保持流體大小？ HTML：流體div，一個與圖像排隊？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta name="description" content=""/> 
     <meta name="keywords"content=""/> 
     <title></title> 
     <link href="css/testmain.css" rel="stylesheet" type="text/css"/> 
     <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    </head> 


    <body> 

     <header> 
     <div id="nav"> 
      <p><a href="#">+</a></p> 
     </div> 
     </header> 
     <div id="container"> 
      <div id="infowrap"> 
        <div style="background-color: white" id="infotop"></div> 
        <div style="background-color: yellow" class="infobox"></div> 
        <div style="background-color: blue" class="infobox"></div> 
        <div style="background-color: green" class="infobox"></div> 
        <div style="background-color: red" class="infobox"></div> 
        <div id="infobot"> 
         <div id="white"></div> 
         <div id="logo"><img style="height: 100%" src="img/logo3.png"></div> 
        </div> 
      </div>  
     </div> 




     <script> 
     $('#video, #nav').on('click', function(){ 
      $('#nav').toggleClass('rotate'); 
     }); 
     </script> 




     <script> 
     $(document).ready(function(){ 
      $("#video, #nav").click(function(){ 
      $("#infowrap").fadeToggle(250); 
      }); 
     }); 
     </script> 




     <video id="video" src="vid/147000037.mp4" autoplay loop> 
    </body> 

</html>

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 100%; 
    height: 100%; 
    background-color: purple; 
} 

header { 
    position: relative; 
    display: block; 
    height: auto; 
    width: 100%; 
    z-index: 999; 
    min-width: 520px; 
} 

#nav { 
    -webkit-transition: all 0.5s; 
    position: absolute; 
    float: right; 
    display: block; 
    top: 5px; 
    right: 15px; 
    color: #000000; 
} 

#nav a { 
    font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; 
    text-decoration: none; 
    font-size: 2.5em; 
    color: #000000; 
} 

.rotate { 
    -webkit-transform: rotate(45deg); 
    -webkit-backface-visibility: hidden; 
} 

#video { 
    position: fixed; 
    top:0px;left:0px;right:0px;bottom:0px; 
} 

#container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    min-width: 520px; 
    min-height: 620px; 
} 

#infowrap { 
    z-index: 900; 
    display: none; 
    position: absolute; 
    top:10px;left:10px;right:10px;bottom:10px; 
    background-color: ; 
    min-width: 500px; 
} 

#infotop { 
    width: 100%; 
    height: 6%; 
    min-width: 500px; 
    float: left; 
    clear: both; 
    display: block; 
} 

.infobox { 
    width: 50%; 
    height: 44%; 
    min-width: 250px; 
    min-height: 250px; 
    float: left; 
    display: block; 
} 

#infobot { 
    width: 100%; 
    height: 6%; 
    min-width: 500px; 
    float: left; 
    clear: both; 
    display: block; 
} 

#white { 
    height: 100%; 
    width:; 
    float: left; 
    display: block; 
    background-color: white; 
} 

#logo { 

    float: left; 
    display: block; 

}

來源

2013-04-29 user2273444

DEMO

CSS：

#infobot { 
    width: 100%; 
    height: 6%; 
    min-width: 500px; 
    float: left; 
    clear: both; 
    display: block; 
    background:#cf5; /* some bg color? */ 
} 

#white { 
    height: 100%; 
    width:50%;  /* !!! */ 
    float: left; 
    display: block; 
    background-color: #fff; 
}

而且BTW使用：

$(function(){ 
    $("#video, #nav").click(function(){ 
     $("#infowrap").fadeToggle(250); 
     $('#nav').toggleClass('rotate'); 
    }); 
});

來源

2013-04-29 13:01:03

感謝您的快速回復Roxon。這不是我所需要的。我希望#logo中的圖像可以決定其寬度，「剩餘」寬度由#white填充。同時保持元素流暢。 – user2273444 2013-04-29 13:15:00

順便說一句，感謝您的腳本:) – user2273444 2013-04-29 13:17:18

@ user2273444我不明白你想要什麼，所以圖像走了，圖像寬度怎麼樣？你希望它是固定的還是流動的？爲什麼你需要#white呢？ – 2013-04-29 15:53:49

流體div，一個與圖像排隊？

回答

相關問題