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和text2覆盖底部80％的其余部分，但它们应该彼此相邻。不是垂直的，而是水平的。所以横向我想要text1的50％，文本2的50。

我不知道如何使用css设置样式。

有人可以提供建议吗

由于

Answer 1

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

image已添加为background。

Answer 2

你去了：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: