Question

我在css中设置了background-image，其高度干扰了在他上方声明的元素。当屏幕变小时，还有三个内容区域没有正确调整大小。随着屏幕变小，所有东西都应叠加在一起，但看起来应用了一个边距。我正在使用%和em来定位我认为现在是错误的事情。任何人都可以帮我解决这些问题，并建议一个更好的方法来定位事情，这样我就不会遇到这个问题吗？我知道我的CSS非常糟糕，但我是新手并且自己学习。这是我创建的codepen会话的链接。

Codepen：http://codepen.io/anon/pen/MKYrgj

另外，如何调整字体大小，使其随着视口变小而与其包含元素一起缩放而不重叠？

Answer 1

对于你的任务部分使用以下css删除旧的我hove这将解决你的问题

   #mission {
        display: flex;
    background-color: #ffffff;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/97/Sveshtnik_IMG_3782.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 7%;
    color: #005944;
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
    clear: both;
}

代替display:flex float: left;也适合您

元素未正确调整大小

1 个答案: