我是HTML Web设计和涉及它的所有语言(PHP,JavaScript,CSS等)的新手。我需要一些帮助,以使我的HTML布局如下所示:
我有以下代码,但是我不知道如何修改它以使其看起来像我想要的。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
float: left;
}
.class1{
width: 100%;
float: left;
height: 100%;
}
.class2{
width: 100%;
float: right;
height: 100%;
}
.class3 {
width: 100%;
float: right;
height: 100%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
非常感谢您的帮助。
[我建议使用grid或flex具有这样的布局,它比基于浮动的布局要好,但是请记住要检查browser compatibility
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"left top"
"left bottom";
height: 100vh;
width: 100%;
}
.class1{
grid-area: left;
}
.class2{
grid-area: top;
}
.class3 {
grid-area: bottom;
}
p {
padding-top: 25px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
请参阅代码段以获取更改的详细信息。基本上,所有3个<div>
都使用float: left
和width: 50%
。在<body>
范围内,添加height: 100vh;
以设置主体的高度。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.class1 {
width: 50%;
float: left;
height: 100%;
}
.class2,
.class3 {
width: 50%;
float: left;
height: 50%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>