html - 如何使用百分比设置网页样式

Question

以下是我的页面结构

<div class="webpage">
    <div class="image"><img...></div>
    <div class="text1"></div> <div class="text2"></div>
</div>

我想要的是让我的网页居中对齐。也就是说它应该在垂直位置填满所有页面。但从横向来看，它应该覆盖中心的 80%。

所以我写了

.webpage{
margin-left : 10%;
margin-right : 10%;
width : 80%;
}

现在，我希望我的图像覆盖顶部 20% 的区域，而我的文本 1 和文本 2 覆盖底部 80% 的其余部分，但它们应该彼此相邻对齐。不是垂直的，而是水平的。所以在横向上，我希望文本 1 占 50%，文本 2 占 50%。

我不确定如何使用 css 设置样式。

有人可以请教

谢谢

Answer 1

请检查 fiddle - https://jsfiddle.net/afelixj/tjsoL8dm/

image 被添加为 background。