元素没有正确调整大小

我有一个background-image设置在CSS中，它的高度与上面声明的元素相互干扰。还有三个内容区域在屏幕变小时不能正确调整大小。当屏幕变小时，所有东西都应该堆叠在一起，但看起来应该有一个边距。我使用%和em来定位我认为现在是错误的东西。任何人都可以帮助我解决这些问题，并推荐更好的方法来定位事情，所以我不会有这个问题？我知道我的CSS非常糟糕，但我对它很陌生，并且自己学习。这里是我创建的codepen会话的链接。元素没有正确调整大小

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

还我怎么调整字体，以便它包含的元素秤无重叠视口变小？

来源

2015-12-08 web-dev

用于其他任务部分使用后通过删除旧的CSS我掀掉这将解决您的问题

#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:flexfloat: left;也为你工作

来源

2015-12-08 09:43:46

谢谢。但是，当我重新调整窗口大小时，我仍然在任务部分和上面的内容部分之间出现红色背景。 –

添加显示：flex;将解决您的问题#mission –

做了伎俩。谢谢！。但为什么它工作？就像我之前说过的，我对CSS比较陌生，所以想要了解事情为什么会起作用和最佳实践 –

元素没有正确调整大小

回答

相关问题