Question

我有两个div，一个在另一个上面。底部div有一个背景图像，有两列，一列宽度为40％，另一列为60％

multidex false

顶部div的最大宽度为600px，内部有两个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; 
    }

如果浏览器窗口宽度为600px或更低，则背景图像和div列完美对齐，但两者的宽度开始不对齐。

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

请参阅此CodePen

感谢您的帮助

Answer 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，您的内容列开始居中对齐（作为一个群组），因此您还需要拥有相对于页面中心的背景/ wrapper（50%中的calc），以便它们相对于彼此始终保持一致。

但是，您的列不相等，因此您实际上希望图像偏离中心静态量（不是父级宽度的百分比，即使列没有变化也会改变），是钙进入的地方 - 240px是你的小列的宽度，也就是你需要保持图像排列的中心距离。

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

1 个答案: