如何用 3 个正方形 (1:1) 和 1 个矩形(剩余高度)设计 HTML 页面
How to design HTML page with 3 squares (1:1) and 1 rectangle (remaining height)
如何设计我的页面,例如这张图片?
这里是我的html代码(矩形不能是剩余高度尺寸):
<!-- rectangle -->
<div style="width: calc(100%/1); height: calc(100% - ((100%/3)*2)); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<!-- 3 squares -->
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
display:grid
做你想做的。
而33.3vw
是最大正方形的边长,适合space。
html,
body {
height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-areas: 'rect rect rect' 'left center right';
grid-template-rows: auto min-content;
}
.rect {
grid-area: rect;
}
.left {
grid-area: left;
width: 33.3vw;
height: 33.3vw;
}
.center {
grid-area: center;
width: 33.3vw;
height: 33.3vw;
}
.right {
grid-area: right;
width: 33.3vw;
height: 33.3vw;
}
/*just to highlight the position*/
div {
border: thin black solid;
}
<div class="rect">Rectangle</div>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
你可以like制作
body,
html {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.box {
height: 100vh;
display: flex;
flex-wrap: wrap;
padding: 5px;
width: 600px;
}
.inner {
border: 3px solid #333;
height: 100%;
}
.column {
flex-basis: 33.33333%;
height: 33.33333%;
padding: 0 2px;
}
.column.small {
height: 200px;
}
.column.full {
flex-basis: 100%;
height: calc(100% - 200px);
padding-bottom: 5px;
}
<div class="box">
<div class="column full">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
</div>
如何设计我的页面,例如这张图片?
这里是我的html代码(矩形不能是剩余高度尺寸):
<!-- rectangle -->
<div style="width: calc(100%/1); height: calc(100% - ((100%/3)*2)); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<!-- 3 squares -->
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
<img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>
display:grid
做你想做的。
而33.3vw
是最大正方形的边长,适合space。
html,
body {
height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-areas: 'rect rect rect' 'left center right';
grid-template-rows: auto min-content;
}
.rect {
grid-area: rect;
}
.left {
grid-area: left;
width: 33.3vw;
height: 33.3vw;
}
.center {
grid-area: center;
width: 33.3vw;
height: 33.3vw;
}
.right {
grid-area: right;
width: 33.3vw;
height: 33.3vw;
}
/*just to highlight the position*/
div {
border: thin black solid;
}
<div class="rect">Rectangle</div>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
你可以like制作
body,
html {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.box {
height: 100vh;
display: flex;
flex-wrap: wrap;
padding: 5px;
width: 600px;
}
.inner {
border: 3px solid #333;
height: 100%;
}
.column {
flex-basis: 33.33333%;
height: 33.33333%;
padding: 0 2px;
}
.column.small {
height: 200px;
}
.column.full {
flex-basis: 100%;
height: calc(100% - 200px);
padding-bottom: 5px;
}
<div class="box">
<div class="column full">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
<div class="column small">
<div class="inner"></div>
</div>
</div>