0

I am trying to get this layout somewhat fluid. I want #logo to be in the lower right of #infobot its size determined by the picture which I want to scale with browser window. #white should just cover up the are to the left of #logo. How do I get #white and #logo to line up next to each other and still keep the fluid sizes? 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;

}
4

1 回答 1

0

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

顺便说一句，使用这个：

$(function(){
    $("#video, #nav").click(function(){
        $("#infowrap").fadeToggle(250);
        $('#nav').toggleClass('rotate');
    });
});
于 2013-04-29T13:01:03.057 回答