Fatal编程技术网
  • css/
  • Css 是否可以垂直对齐fluid div内的各种流体相对或静态定位元件？

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

css html

Css 是否可以垂直对齐fluid div内的各种流体相对或静态定位元件？,css,html,vertical-alignment,fluid-layout,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.pn

我有这样的代码：

<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>
有三个这样的框，水平对齐-左、中、右-它们位于名为content的更大框中，而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>
我试过使用position:absolute；或更改为显示：表格单元格；但是什么都没用-也许我在某个地方犯了错误，当我尝试这个

当将图像定位为绝对时，它们已从自己的容器甚至横幅框容器中折叠出来

我的主要问题是我不知道如何使页面的每个元素都像固定大小一样工作，但仍然可以用百分比来描述。 还有，如何构造这个横幅框容器，使其延伸到内容100%的高度，然后在横幅框内垂直对齐这些图像

我强烈希望不要使用JS，不要使用框架，我的布局100%基于百分比，这就是为什么我在这个问题上绞尽脑汁的原因。我只想使用XHTML/CSS2或HTML5/CSS3，但要让这个网站在IE8+和现代浏览器上工作

但如果连一个像素都不用的话，什么样的网格大小的网站固定大小，而不是像Bootstrap这样的网格框架，对我来说是最好的呢？960像素还是1024像素

如果我的问题对我来说可能简单而愚蠢，但对我来说却很难解决，那么干杯并致歉。

我建议您阅读本教程：

特别是托斯卡纳豪华度假村示例，您可以在此处查看：

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

tl:dr，有一个演示给我们使用吗？通常，通过使代码简短、切中要害，您将有更好的机会获得您想要的答案，并更快地获得答案。尝试删除与问题发生部分无关的任何代码，或者尝试制作一个简化的类似代码，为您展示相同的问题。绝对容器在正常内容流之外，类似于浮动，因此它们崩溃也就不足为奇了。您可能不喜欢使用任何JS，但您几乎必须垂直居中。CSS中没有傻瓜式的方法，除非您将其限制在预先确定的约束中。另外，将您的相关代码复制到JSFIDLE，以便人们可以调整您的代码* 
<!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>

/*@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%;
    }
}