如何风格百分比

Question

以下网页是我的网页结构

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

我想是我的webpage进行集中排列。这是它应该填充所有页面的垂直位置。但横向上，它应该覆盖中心的80％。

所以我写了

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

现在，我想我的图像覆盖区域的前20％，而我的文本1和文本2涵盖的底部80％的休息，但他们应该彼此相邻排列。不是垂直的，而是水平的。 所以水平我想50％为text1，50为文本2.

我不知道如何用CSS来设计它。

可有人请咨询

感谢

Answer 1

请检查小提琴 - https://jsfiddle.net/afelixj/tjsoL8dm/

image添加为background。

Answer 2

你去那里：

.content { 
 
    width: 80%; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background-color: orange; 
 
} 
 
.top { 
 
    height: 20%; 
 
    max-height: 20%; 
 
    background-image: url('http://sumxwaresolutions.site11.com/welcome/Tree-of-Life-Website-Banner.jpg'); 
 
    background-size: cover; 
 
} 
 
.bottom { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
.text1 { 
 
    display: inline; 
 
    float: left; 
 
    width: 50%; 
 
    word-break: break-all; 
 
    word-wrap: break-word; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.text2 { 
 
    display: inline; 
 
    float: right; 
 
    width: 50%; 
 
    word-break: break-all; 
 
    word-wrap: break-word; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
}

<div class="content"> 
 
    <div class="top"></div> 
 
    <div class="bottom"> 
 
     <h2>bottom area</h2> 
 
     <div class="text1">text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1</div> 
 
     <div class="text2">text2text2text2text2text2text2text2text2text2text2text2text2text2text2text2text2</div> 
 
    </div> 
 
</div>