我试图了解如何像打印屏幕上那样构建一个4个方框的正方形。我已经在Apple网站上找到了这种布局,我很喜欢它!
我尝试使用bootstrap和flexbox。我认为flexbox是更好的解决方案,但我没有找到重现此布局的方法。
任何人都可以帮助我弄清楚如何创建该布局吗?
答案 0 :(得分:0)
如果您想使用引导程序,则很容易做到。
.noMargin {
margin: 0px;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
.four {
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row noMargin">
<div class="col one">
one
</div>
<div class="col two">
two
</div>
</div>
<div class="row noMargin">
<div class="col three">
three
</div>
<div class="col four">
four
</div>
</div>
</div>
如果您想做纯html / css:
.row {
display: flex;
width: 100%;
}
.row div {
width: 50%;
}
.noMargin {
margin: 0px;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
.four {
background-color: blue;
}
<div class="row noMargin">
<div class="one">
one
</div>
<div class="two">
two
</div>
</div>
<div class="row noMargin">
<div class="three">
three
</div>
<div class="four">
four
</div>
</div>
答案 1 :(得分:-1)
<!DOCTYPE html>
<html>
<head>
<title>Box</title>
<style>
#div1{
height:300px;
width:300px;
background-color:red;
margin:0;
}
#div2{
height:300px;
width:300px;
background-color:green;
position:relative;
left:320px;
bottom:300px;
}
#div3{
height:300px;
width:300px;
background-color:yellow;
position:relative;
bottom:280px;
}
#div4{
height:300px;
width:300px;
background-color:blue;
position:relative;
left:320px;
bottom:580px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
</html>