3

我正在尝试将图像模型转换为 HTML/CSS 并且我正在努力让事物正确定位 - 特别是垂直对齐，以及在调整窗口大小时让事物保持相对位置。

JSFiddle 代码：

http://jsfiddle.net/victorhooi/ZcrCc/

全屏 JSFiddle 输出：

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

我有这个模型：

在此处输入图像描述

但是，如果您查看上面的 JSFiddle，我似乎无法获得打开和关闭分支，以及中心的类型图像在白框中垂直对齐 - 它们无处不在。

的HTML：

<section id="proposal" class="backgroundphotos">
<div class="row">
        <div class="col-md-10 col-md-offset-1 panel panel-default">
            <div class="row">
                <div class="col-md-1 col-md-offset-2">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_01.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_02.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_03.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_04.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_05.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_06.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_07.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_08.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_09.png" />
                </div>
                <div class="col-md-1">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
                </div>
            </div>
        </div>
    </div>
</section>

使用 CSS：

    .backgroundphotos {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll; /* Why does this not carry over? */
        min-height: 800px;

    }

    #proposal {
        background: url(../img/04.jpg) no-repeat center center fixed;
        background-attachment: scroll;
    }

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: -90px;
    }

    #proposal > div.row {
        position: relative;
        bottom: -22.500em;
    }

注意：我已经编辑了原始问题，将其拆分为其他 CSS 定位问题的单独问题。相关问题在这里：

CSS 将两个元素相对于彼此定位，并在调整大小时保持在那里

悬停时打开的基于 Glyphicon 的导航栏的 CSS 定位

4

1 回答 1

0

当我有更多时间检查其他问题时将编辑我的答案（您可能需要考虑将它们单独提出问题），但对于您不应该使用的关于分支的第一个问题bottom: -90px

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: 0px; //changed from -90 to just 0
    }

分支的格式非常完美，但这样做会使它们向下移动。

那么问题是图片是否正确对齐。我添加bottom: -40px到课程.col-md-offset-2中，但那是引导的东西，所以你可能不想编辑它。也许创建自己的类，这样您就可以直接添加它或将所有.col-md-offset-2div 封装在一个可以向下移动的包装器 div 中。

于 2013-09-30T19:03:27.623 回答