[css] 第44天手写一个满屏品字布局的方案 #166

haizhilin2013 · 2019-05-29T20:35:57Z

第44天手写一个满屏品字布局的方案

tzjoke · 2019-05-31T01:35:36Z

整体100%高度，上面50高度margin auto居中，下面50%高度俩float一半宽度。。应该符合题意把

DingkeXue · 2019-08-14T11:37:23Z

flex布局

zhuyuedlut · 2019-08-17T06:02:36Z

用grid布局是否好点

seho-dev · 2019-09-13T07:59:42Z

<title>Parcel Sandbox</title> <style> .box { width: 100%; justify-content: center; display: flex;

		flex-wrap: wrap;
	}
	.top {
		flex: 50px 0 0;
        width: 100px;
        height: 100px;
        background: red;
        flex-grow: 3;
        font-size: 18px;
        color: #fff;
        text-align: center;
	}
	.bottom {
        width: 100%;
        
		display: flex;
	}
    .bottom-first {
        width: 50%;
        background: blue;
    }
    .bottom-second{
        width: 50%;
        background: orange;
    }
</style>

top

first

second

ipadthree · 2019-09-21T21:33:12Z

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <article class="container">
            <div class="firstRow">
                <div class="item"></div>
            </div>
            <div class="secondRow">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </article>
    </body>
</html>

//style.css
html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
 
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.firstRow, .secondRow {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10px 0;
}

.item {
    background-color: red;
    width: 40%;
    height: 100%;
    margin: 0 auto;
    border-radius: 10%;
}

kruzabc · 2020-01-02T03:52:29Z

两行，每行做flex布局

blueRoach · 2020-07-21T02:17:14Z

**flex**
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.div1{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
  background-color: #f2f2f2;
}
.div1 > div{
  width: 50%;
  height: 50%;
}
.div2{
  margin: 0 25%;
  background-color: yellow;
}
.div3{
  background-color: blanchedalmond;
}
.div4{
  background-color: blueviolet;
}
</style>

<style>
**inline-block**
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.div1{
  height: 100%;
  background-color: #f2f2f2;
  font-size: 0;
}
.div1 > div{
  width: 50%;
  height: 50%;
}
.div2{
  margin: 0 auto;
  background-color: yellow;
}
.div3{
  display: inline-block;
  background-color: blanchedalmond;
}
.div4{
  display: inline-block;
  background-color: blueviolet;
}
</style>

<body>
  <div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
  </div>
</body>

cinsyk · 2020-09-19T01:56:26Z

标准流

<body>
    <div class="top"><div>
    <div class="bottom">
        <div class="left"><div>
        <div class="right"><div>
    <div>
</body>
.top {
    width:50%;
    marign:auto;
}
.bottom {
    font-size:0;
}
.bottom div {
    display:inline-block
    width:50%;
}

浮动布局

<body>
    <div class="top"><div>
    <div class="bottom">
        <div class="left"><div>
        <div class="right"><div>
    <div>
</body>
.top {
    width:50%;
    height:50%;
    marign:auto;
}
.bottom {
    height:50%;
    overflow:hidden
}
.bottom div {
    float:left;
    width:50%;
}

flex布局

<body>
    <div class="top"><div>
    <div class="bottom">
        <div class="left"><div>
        <div class="right"><div>
    <div>
</body>
.top {
    width:50%;
    height:50%;
    marign:auto;
}
.bottom {
    display:flex;
    height:50%;
}
.bottom div {
    flex:1;
    height:100%;
}

grid布局

<body>
    <div class="top"><div>
    <div class="left"><div>
    <div class="right"><div>
</body>
body {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.top {
    grid-column-start: 1;
    grid-column-end: 3;
}

haizhilin2013 added the css css label May 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第44天手写一个满屏品字布局的方案 #166

[css] 第44天手写一个满屏品字布局的方案 #166

haizhilin2013 commented May 29, 2019

tzjoke commented May 31, 2019

DingkeXue commented Aug 14, 2019

zhuyuedlut commented Aug 17, 2019

seho-dev commented Sep 13, 2019

ipadthree commented Sep 21, 2019

kruzabc commented Jan 2, 2020

blueRoach commented Jul 21, 2020 •

edited

cinsyk commented Sep 19, 2020

[css] 第44天 手写一个满屏品字布局的方案 #166

[css] 第44天 手写一个满屏品字布局的方案 #166

Comments

haizhilin2013 commented May 29, 2019

tzjoke commented May 31, 2019

DingkeXue commented Aug 14, 2019

zhuyuedlut commented Aug 17, 2019

seho-dev commented Sep 13, 2019

ipadthree commented Sep 21, 2019

kruzabc commented Jan 2, 2020

blueRoach commented Jul 21, 2020 • edited

cinsyk commented Sep 19, 2020

[css] 第44天手写一个满屏品字布局的方案 #166

[css] 第44天手写一个满屏品字布局的方案 #166

blueRoach commented Jul 21, 2020 •

edited