如何风格百分比
问题描述:
以下网页是我的网页结构如何风格百分比
<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来设计它。
可有人请咨询
感谢
答
你去那里:
.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>