是否可以垂直对齐流体div内的各种流体相对或静态定位元素？

时间：2014-01-27 14:43:24

标签： css html vertical-alignment fluid-layout

我有这样的代码：

<div id="virtual-studio" class="banner-box">

    <a href="some_url" target="_blank">
        <img src="some.png" alt="some_alt" class="logo">
    </a>

    <div class="banner-text">
        <img src="some.png" alt="" />
    </div>

    <a href="some_url" target="_blank" class="see-more-button">
        <img src="some.png" alt="some_alt" />
    </a>

</div>

以下是此横幅框的样式：

.banner-box {
    display: inline-block;
    width: 26%;
    max-width: 26%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0 auto;
}

.banner-box a {
    display: block;
    clear: both;
    width: 100%;
    top: 0;
    margin: 0 auto;
    padding: 0;
}

.logo {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}    

.banner-text {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 auto;
}

.banner-text img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}

.see-more-button {
    display: block;
    clear: both;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    padding: 0;
}

.see-more-button img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}

有三个这样的盒子，水平对齐 - 左，中，右 - 它们在更大的盒子里面，名为 #content ，在另一个名为 #container

我的整个布局意味着100％流畅 - 我没有在任何地方使用像素 - 只是百分比。

我想构建这三个图像，它们将在盒子中垂直对齐，在顶部 - 中间 - 底部样式，但不需要使一个元素固定大小。

布局中的每个元素都应该具有基于百分比的大小。 我使用的图像也应该是流畅的。

这是整个.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">

    </head>

    <body>

        <div id="wrapper">

            <div id="header">

                <div>
                    <img src="some.png" alt="some-alt" />
                </div>

            </div>

            <div id="container">

                <div id="content">

                    <div id="virtual-studio" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="some.png" alt="some-alt" />
                        </a>

                    </div>

                    <div id="mu-interactive" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="some.png" alt="some-alt" />
                        </a>

                    </div>

                    <div id="mu-animation" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="see-more.png" alt="some-alt" />
                        </a>

                    </div>

                </div>

                <div id="shadows">
                    <img src="shadows.png" alt="Shadows" />
                </div>

            </div>

            <div id="footer">

                    <img src="footer-line.png" alt="Footer.png" />
                    <div id="contact">
                        <p><span>company</span> co.</p>
                        <p>mail: <span>contact&#64;mail&#46;com</span></p>
                    </div>

            </div>

        </div>

    </body>

</html>

和.css：

/*@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800");
*/

/** { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    /*-moz-box-sizing: border-box; /* Firefox, other Gecko */
    /*box-sizing: border-box; /* Opera/IE 8+ */
/*}*/

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;*/
}

body {
    /*position: relative;*/
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    /*font-size: 15px;*/
    font: 1em 'Open Sans', Arial, Helvetica, sans-serif;
    /*font: "Arial Black", Gadget, sans-serif;*/
}

img {
    max-width: 100%;
    height: auto;
    /*display: block;
    clear: both;
    position: relative;
    margin: 0 auto;*/
}

#wrapper {
    position: absolute;
    margin: 10% 15%;
}

#header {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 24%;
    margin: 0 auto;
    padding: 0 auto;
}

#header div {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
}

#header img {
    position: relative;
    display: block;
    clear: both;
    /*width: auto;
    height: auto;*/
    margin: 0 auto;
    /*left: 0; right: 0; bottom: 0;*/
}

#container {
    position: relative;
    display: block;
    width: 100%;
    height: 70%;
    margin: 0 auto;
    padding: 7% 0 0 0;
    text-align: center;
}

#content {
    position: relative;
    display: block;
    width: 100%;
    height: 85%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.banner-box {
    /*position: relative;*/
    display: inline-block;
    width: 26%;
    max-width: 26%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0 auto;
}

.banner-box a {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    /*min-height: 50%;
    height: 50%;*/
    top: 0;
    margin: 0 auto;
    padding: 0;
}

.logo {
    position: relative;
    /*display: inline-block;*/
    display: block;
    clear: both;
    /*width: 100%;
    height: 100%;*/
    margin: 0 auto;
    /*vertical-align: top;*/
}

.logo:hover {
    cursor: pointer;
    height: auto;
    width: auto;
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
}    

.banner-text {
    /*position: relative;*/
    /*display: inline-block;*/
    display: block;
    clear: both;
    width: 100%;
    /*height: 25%;
    min-height: 25%;*/
    margin: 0 auto;
    top: 50%;
    /*padding:  5% 0;
    /*font: 0/0 a;
    vertical-align: middle;*/
}

.banner-text img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
    /*vertical-align: middle;*/
}

.see-more-button {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    /*height: 25%;
    min-height: 25%;*/
    /*vertical-align: bottom;*/
    bottom: 0;
    margin: 0 auto;
    padding: 0;
}

.see-more-button img {
    position: relative;
    display: block;
    clear: both;
    /*width: 100%;
    /*height: 100%;*/
    margin: 0 auto;
    /*font: 0/0 a;*/
}

#virtual-studio {
    /*position: relative;
    display: inline-block;*/
    float: left;
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;*/
}

/*#virtual-studio a {

}

#virtual-studio a img {

}*/


/*#mu-interactive {
    /*position: relative;
    display: inline-block;*/
    /*float: left;*/
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}*/

/*#mu-interactive a {

}

#mu-interactive a img {

}*/

#mu-animation {
    /*position: relative;
    display: inline-block;*/
    float: right;
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;*/
}
/*
#mu-animation a {

}

#mu-animation a img {

}/*

/*#virtual-studio a img:hover, #mu-interactive a img:hover, #mu-animation a img:hover {
    width: 101%;
    height: 101%;
}*/

#shadows {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 10%;
    margin: 0 auto;
}

#shadows img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
    width: 100%;
    /*height: 100%;*/
    /*bottom: 15%;*/
    /*height: 100%;
    top: 0; right: 0; left: 0;*/
}

#footer {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 0 0 0;
    /*font-size: 1em;*/
    /*top: 0; right: 0; left: 0;*/
}

#footer img {
    position: relative;
    display: block;
    clear: both;
    width: 95%;
    /*height: auto;*/
    margin: 0 auto;
    /*padding: 2% 0 0 0;
    /*top: 0; right: 0; left: 0;*/
}

#footer #contact {
    position: relative;
    margin: 1% 0 0 0;
}

#footer p {
    display: block;
    clear: both;
    /*position: relative;*/
    margin: 0 auto;
    color: #AFBEA5;
    text-align: center;
    width: auto;
}

#footer span {
    font-weight: bold;
    color: #BDC9AF;
}

@media only screen
and (max-device-width: 320px) {
    html {
    background: url('some-background-320.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 321px)
and (max-device-width: 480px) {
    html {
    background: url('some-background-480.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 481px)
and (max-device-width: 768px) {
    html {
    background: url('some-background-768.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 767px)
and (max-device-width: 1024px) {
    html {
    background: url('some-background-1024.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 1025px)
and (max-device-width: 1680px) {
    html {
    background: url('some-background-1680.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 1681px) {
    html {
    background: url('some-background-1920.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

我尝试使用位置：绝对; 或更改为显示：table-cell; 但没有任何效果 - 也许我在某个地方犯了错误，在尝试时..

将图片定位到绝对图片时，它们会从自己的容器中折叠出来，甚至从＃banner-box 容器

中折叠出来

我的主要问题是我不知道如何使页面的每个元素表现得像固定大小，但仍然可以通过百分比来描述。 并且，如何构造这个＃banner-box容器，使其延伸到 #content 100％高度，然后将这些三维图像垂直对齐＃banner-box 。

我强烈不想使用JS系列，没有框架，并且我的布局100％基于百分比，所以这就是为什么我在这个问题上绞尽脑汁。我只想使用XHTML / CSS2或HTML5 / CSS3，但要使这个网站适用于IE8 +和现代浏览器。

但如果没有机会不使用像素，那么网格大小（网站固定大小，而不是像Bootstrap .etc这样的网格框架）对我来说最合适？ 960px还是1024px？

干杯和抱歉，如果我的简单和愚蠢（可能），但对我来说很难，问题对你来说很烦人。

1 个答案:

答案 0 :(得分：0)

我建议您阅读本教程：http://tinyurl.com/qb6q78o

特别是托斯卡纳豪华度假村的例子，你可以在这里查看：http://cameronmoll.com/projects/book/

这是一种完全流畅的设计，包括图像。我在几天内编写了自己的版本，只有10天的CSS经验。

相关问题
最新问题