将 div 与父 div 的背景图像对齐答案

【问题标题】：Aligning div with background image of parent div将 div 与父 div 的背景图像对齐
【发布时间】：2016-06-21 23:10:11
【问题描述】：

我有两个 div，一个在另一个之上。底部 div 有两列背景图片，一列 40% 宽，另一列 60%

    .container.style-2 {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
        background-repeat: repeat-y;
        background-position: 40% 0; 
    }

    .container.style-2:before {
        height: 100px;
        width: 100%;

        margin-top: -100px;
        position: absolute;
        content: '';
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: 40% 0; 
    }

    .container.style-2:after {
        height: 150px;
        width: 100%;

        position: absolute;
        content: '';
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: center; 
        background-position: 40% 0; 
    }

顶部 div 的最大宽度为 600 像素，在两个 div 列内，一个为 40% 宽度，另一个为 60%

    .container .row .col-1, .container .row .col-2 {
        display: inline-block;
        float: left;
    }

    .container .row .col-1 {
        width: 40%;
        background-color: #00ffff;
    }

    .container .row .col-2 {
        width: 60%;
        background-color: #ff0000;
    }

如果浏览器的窗口宽度为 600 像素或更小，则背景图像和 div 列完美对齐，但再宽一点，两者就会开始错位。

是否可以对齐顶部和底部的 div 列？

请看这个CodePen

感谢您的帮助

【问题讨论】：

小提琴与上面的代码不匹配，而是使用 :before 和 :after 伪元素。我已经根据小提琴在下面回答了，但最好让它们匹配，这样其他发现问题的人就不会被抛弃。
@ryantdecker 代码已更新以包含伪元素。

标签： css

【解决方案1】：

http://codepen.io/ryantdecker/pen/zBoNWK

CSS calc 救援 - 以及媒体查询。

@media (min-width:601px) {
  .style-2:before,
  .style-2:after {
    background-position: calc(50% + 240px);}
}

一旦max-width:600px; 接管了您的.row，并且您的内容列开始居中对齐（作为一个组），因此您还需要使您的背景相对于页面/包装器的中心（ 50% in calc) 以便它们彼此保持一致的位置。

但是，您的列不相等，因此您实际上希望图像从中心偏移一个静态量（不是父级宽度的百分比，即使列没有变化也会改变），这是 calc 的来源——240px 是小列的宽度，也恰好是保持图像对齐所需的距离中心多远。

【讨论】：