Wie füge ich eine vertikale Tabelle Anzeige Rechtecke in einer horizontalen Tabelle Anzeige Rechtecke mit HTML und CSS?

Ich möchte eine Seite erstellen, wo es 3 Rechtecke (in schwarz) gibt. Der Code zeigt dies. Jetzt möchte ich innerhalb des 2. horizontalen Rechtecks 3 vertikale Rechtecke mit verschiedenen Größen (in rot) erstellen. Jeder Text sollte in jedem Rechteck (vertikal und horizontal) zentriert sein.Wie füge ich eine vertikale Tabelle Anzeige Rechtecke in einer horizontalen Tabelle Anzeige Rechtecke mit HTML und CSS?

The code below is the black lines and the red lines is what I'm trying to do.

Wie füge ich 3 Spalten innerhalb des zweiten Rechtecks und Zentrieren der gesamten Textes in dieser:

<div class="wrap"> 
    <div class="row_wrap"> 
    <div class="head x"> 
     ONE 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="middle x"> 
     TWO 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="bottom x"> 
     THREE 
    </div> 
    </div> 
</div> 

body {font-size:36px; color:green;} 
.wrap {display: table; width:100%;} 
.row_wrap{display:table-row;} 
.x{display:table-cell; vertical-align:middle; text-align:center;} 
.head{height:200px; background:#fa4;} 
.middle{height:400px; background:#4af;} 
.bottom{height:100px; background:#a4f;}

Quelle

2016-04-02 Ric.S

Fügen Sie also die drei untergeordneten divs auch als Tabellenzellen hinzu und was bekommen Sie? –

Funktioniert nicht. Die vertikalen Rechtecke funktionieren nur, wenn sie von den horizontalen Rechtecken getrennt sind und/oder das 3. Rechteck nicht auf derselben Linie bleiben soll. –

Also machen Sie eine Demo von dem, was Sie bisher versucht haben ... –

Ich weiß, diese Frage ist alt, aber es ist interessant, es ist möglich, zu wissen, diese zu lösen mit flexbox.

.row, .column{ 
 
    display: flex; 
 
} 
 

 
.row{ 
 
    width: 100%; 
 
    height: 10rem; 
 
    border: 3px solid black; 
 
    flex-flow: 
 
} 
 

 
.column{ 
 
    border:3px solid red; 
 
    height: 100%; 
 
    flex: 1; 
 
} 
 

 
.column--big{ 
 
    flex: 2; 
 
} 
 

 
.center{ 
 
    justify-content: center; 
 
    align-items: center 
 
}

<div class="row center"> 
 
    <span>Center</span> 
 
</div> 
 

 
<div class="row center"> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column column--big center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
</div> 
 

 
<div class="row center"> 
 
    <span>Center</span> 
 
</div>

Dieser Code offensichtlich optimiert werden könnte, aber es ist ein Anfang.

Quelle

2017-03-28 17:04:55

Wie füge ich eine vertikale Tabelle Anzeige Rechtecke in einer horizontalen Tabelle Anzeige Rechtecke mit HTML und CSS?

Antwort

Verwandte Themen