流體div，一個要對齊的圖片？

Question

我試圖使這種布局有點流暢。 我希望#logo在#infobot的右下角，其大小由我要與瀏覽器窗口縮放的圖片確定。 #white應該掩蓋#logo左側的。 如何使#white和#logo彼此並排排列，同時仍保持流體尺寸不變？ HTML：

<!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;

}

Answer 1

演示

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

順便說一句使用這個：

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

流體div，一個要對齊的圖片？

問題描述

1 個解決方案

解決方案1
0 2013-04-29 13:01:03

流體div，一個要對齊的圖片？

問題描述

1 個解決方案

解決方案1 0 2013-04-29 13:01:03

解決方案1
0 2013-04-29 13:01:03