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

的 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'); }); });

流体div，一个与图像对齐？

1 个答案: