Question

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

JSFiddle代码：

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

全屏JSFiddle输出：

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

我有这个模型：

enter image description here

但是如果你看看上面的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 Positioning two elements relative to each other, and keeping there during resize

CSS Positioning for Glyphicon-based Navbar that Opens on Hover

Answer 1

当我有更多时间检查其他问题时，我会编辑我的答案（您可能需要考虑将它们作为单独的问题）但是对于您关于分支的第一个问题，您不应该使用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-2 div封装在一个可以向下移动的包装div中。

CSS相对定位和垂直对齐与Bootstrap

1 个答案: