Skip to content

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

New issue
New issue
Open
Open
[css] 第44天 手写一个满屏品字布局的方案#166
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on May 29, 2019
Collaborator

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

Activity

haizhilin2013
added
csscss
on May 29, 2019
tzjoke

tzjoke commented on May 31, 2019

@tzjoke
tzjoke
on May 31, 2019

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

DingkeXue

DingkeXue commented on Aug 14, 2019

@DingkeXue
DingkeXue
on Aug 14, 2019

flex布局

Lucenova

Lucenova commented on Aug 17, 2019

@Lucenova
Lucenova
on Aug 17, 2019

用grid布局是否好点

seho-dev

seho-dev commented on Sep 13, 2019

@seho-dev
seho-dev
on Sep 13, 2019
<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

ipadthree commented on Sep 21, 2019

@ipadthree
ipadthree
on Sep 21, 2019
<!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

kruzabc commented on Jan 2, 2020

@kruzabc
kruzabc
on Jan 2, 2020

两行 ，每行做flex布局

blueRoach

blueRoach commented on Jul 21, 2020

@blueRoach
blueRoach
on Jul 21, 2020 · edited by blueRoach
**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

cinsyk commented on Sep 19, 2020

@cinsyk
cinsyk
on Sep 19, 2020
  • 标准流
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@ipadthree@blueRoach@Lucenova@tzjoke

        Issue actions
          [css] 第44天 手写一个满屏品字布局的方案 · Issue #166 · haizlin/fe-interview