简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - Wie implementiert man dieses Layout mit Flex?
ringa_lee
ringa_lee 2017-06-30 09:56:55
0
2
929

Wie kann ich mit Flex dieses Layout erreichen? Ich konnte erst beim dritten Mal mit dem Schreiben fertig werden. 

<p class="pic">
    <p class="pic1"></p>
    <p class="pic2"></p>
    <p class="pic3"></p>
    <p class="pic4"></p>
</p>

<style>
    .pic{
        display: flex;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        flex-wrap: wrap;
    }
    .pic1{
        flex: 1;
        height: 100%;
        background-color: pink;
    }
    .pic2{
        flex: 1;
        height: 50%;
        background: #C81623;
    }
    .pic3{
        /*width: 25%;*/
        /*float: left;*/
        /*height: 50%;*/
        /*background-color: green;*/
    }
    ...
ringa_lee
ringa_lee

ringa_lee

Antworte allen(2)
刘奇
刘奇2017-06-30 09:58:55 2 Etage

大概就像下面这样

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        #main {
            display: flex;
            height: 500px;
        }

        #left {
            width: 200px;
            background: red;
        }

        #right-box {
            display: flex;
            flex-direction: column;
            background: blue;
            flex: 1;
        }

        #right-top {
            height: 200px;
            background: yellow;
        }

        #right-bottom-box {
            display: flex;
            flex: 1;
        }

        #bottom-left {
            width: 50%;
            background: pink;
        }
        
        #bottom-right {
            width: 50%;
            background: magenta;
        }
    </style>
</head>

<body>
    <p id="main">
        <p id="left"></p>
        <p id="right-box">
            <p id="right-top"></p>
            <p id="right-bottom-box">
                <p id="bottom-left"></p>
                <p id="bottom-right"></p>
            </p>
        </p>
    </p>
</body>

</html>

效果

Wie +0
Antwort hinzufügen
ringa_lee
ringa_lee2017-06-30 09:58:55 1 Etage 
.flex-box {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
<p class="flex-box">
  <p class="flex-2">pic</p>
  <p class="flex-3">
    <p>pic</p>
    <p class="flex-box">
      <p class="flex-1">pic</p>
      <p class="flex-1">pic</p>
    </p>
  </p>
</p>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！