css - 是否可以在流体 div 中垂直对齐各种流体相对或静态定位的元素？-6ren

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

转载作者：行者123 更新时间：2023-11-28 11:25:13

我有这样的代码:

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

我试过使用 position: absolute; 或更改为 display: table-cell; 但没有任何效果 - 也许我在尝试此操作时在某处犯了错误..

当定位图像到绝对时，它们已经从自己的容器中折叠出来，甚至从 #banner-box 容器中折叠出来

我的主要问题是我不知道如何让页面的每个元素都表现得像固定大小但仍然通过百分比来描述。并且，如何构建这个#banner-box 容器，使其拉伸(stretch)到 #content 100% 高度，然后在 #banner-box 内垂直对齐这些图像。

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

但是如果连一个像素都不用的话，什么网格大小(网站固定大小，而不是像 Bootstrap 等网格框架)最适合我？ 960 像素还是 1024 像素？

如果我的简单和愚蠢(可能)，但对我来说很难，问题让你很烦，那么干杯和抱歉。

最佳答案

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

特别是托斯卡纳豪华度假村示例，您可以在此处实时查看:http://cameronmoll.com/projects/book/

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

关于css - 是否可以在流体 div 中垂直对齐各种流体相对或静态定位的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21383743/

文章推荐： html - IE 和 Chrome 滚动条干扰菜单导航

文章推荐：移动div的CSS渐变背景？

文章推荐： CSS font-face 不起作用

文章推荐： html -

的意外宽度

reactjs - 将带有标签的输入与没有标签的按钮对齐(垂直)
我想对齐输入，它有两个标签和一个没有任何标签的按钮，以便它们都在同一级别。这是期望的效果: 这是我到目前为止得到的: 我通过在按钮前添加带有空白空间的标签，设法让它看起来像我想要的样子，但这并不理想
JavaFX - 垂直 Accordion
您好，我有一个关于 JavaFX 的问题。我担心答案是剥皮，我对此一无所知，但这里是。我想在 JavaFX 中制作 Accordion/TabPane 交叉。我将尝试用文字解释自己，但在下面我已经包
c - 垂直/水平翻转二维数组
这可能被认为是一个低俗的问题。然而，我还没有找到任何代码，也没有找到任何讨论如何用我的编程语言 C 来解决这个问题的论坛。已经进行了大量的尝试，并且最终都以实际上“硬编码”新数组而告终。我正在尝试垂
Java(垂直)调整随机间隙的大小
我有以下代码: public Frame() { super(); setVisible(true); setDefaultCloseOperation(JFrame.EXIT
iphone - UIModalTransitionStyleFlipHorizontal 垂直？
是否可以将 UIModalTransitionStyleFlipHorizontal 修改为垂直而不是水平？我通常会使用 CATransition 来执行此操作，但该方法需要将一个 UIView
ios自定义导航(垂直)建议
我有一个 ios5 导航的想法，我正在一个应用程序上做，我认为从 SOF 那里得到一些关于我的想法的建设性批评是明智的。 p> 想法: UIView 包含 6 个左右垂直堆叠的按钮 UIButtons
iphone - 垂直 UIScrollView？
我正在努力进行一些 iOS 开发，我希望有人能够帮助我提出建议。我想实现一堆看起来像一副纸牌的 UIView。用户应该能够通过触摸刷出“卡片”。我想到了带有 pagingEnabled 的 UIScr
html - 工作台居中(垂直)
我想创建一个包含四张图片的入口页面作为指向其他页面的链接。但我希望这些图片显示在显示器的中间(垂直和水平)。我已经尝试了很多事情，但我做对了。我什至无法以任何方式垂直对齐图片(例如底部，您将在代码中看
javascript - 重写伪元素水平。垂直
我有代码在 div 的底部创建一个元素作为向下的“箭头/指针”。我需要这样写，以便“箭头/指针”指向左侧当前代码 - HTML 掩码 css 在 fiddle 中 https://j
javascript - 如何将焦点集中的div居中？ [垂直]
下面的代码将焦点放在中间的 div 上，但该 div 出现在窗口的底部。如何使该 div 居中，使其显示在窗口的中心[垂直]，而不设置固定位置。 $(function(){ $("#focus
html - 无法将单选按钮对齐到中心(垂直)
这个问题在这里已经有了答案: Vertical Align Center in Bootstrap 4 [duplicate] (20 个答案) 关闭 4 年前。我创建了一个由两列组成的结构，第一
jquery slider 垂直
演示:http://jsfiddle.net/vpH8r/2/ 我在上面创建了一个 jfiddle，试图让垂直滑动正常工作。当前的问题是 slider 标签不会移动，并且不会出现从顶部到底部的干净滑
Javascript 垂直 slider
我正在尝试在 javascript 中创建一个垂直 slider 小部件。我不是在寻找任何插件或库，我正在尝试查看如何使用纯 javascript 完成它。我想我大概明白了。请在此处查看到目前为止已
html - 在导航列表中居中图像(垂直)
我正在尝试创建一个响应式导航列表，并将图像置于页面列表的中心我已经设法接近那个，但是图像比列表更靠前。我想像这样得到它，但似乎无法弄清楚。任何帮助将不胜感激! 代码:https://jsfidd
html - 居中导航栏 - 垂直
有人可以帮我将导航栏居中，使其在页面上垂直居中吗？我希望导航栏中央的链接位于顶部，而不是像现在这样向左浮动。提前致谢 Toggle navigation
Javascript 垂直、水平缩放图像和变换图像位置
我想垂直、水平转换图像，并使用 javascript 缩放图像。目前我设法使调整大小的图像起作用，但它看起来不正确。我正在尝试使用类似于 Transform image 的东西.调整垂直移动条时，图像
html - 转动水平面包屑导航，垂直
这可能是一个问题，但要求太多，但我已经达到了我的极限。我有这段 ( http://jsfiddle.net/3whTa/) CSS，它创建了一个箭头水平面包屑导航。我想做的是将其转换为垂直。就像箭
c++ - 为什么成像操作在opencv中执行到图像的一半(垂直)
我正在使用 opencv 进行非常简单的操作，但我无法理解为什么会出现此错误/问题。图像被操作到图像的一半(垂直)。 Mat img = imread("/Users/tanmoy/Documents
html - 垂直/水平居中伪元素的生成内容
我想知道是否有人有任何技术来定位 css 生成的内容。例如: .block { height: 150px; width: 150px; border: 1px solid black;
Android:垂直 ViewPager
关闭。这个问题需要更多 focused .它目前不接受答案。想要改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭3年前。 Improve this que

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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