如何風格百分比

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>