html - Equally distributing height with CSS -

-

i have html problem pretty tricky , i'm not sure there css-based solution it. have 3 column grid. first , third columns can contain variable number of rows in them. second column has 1 row. each row has minimum height.

so column rows have rows height set minimum height. rows in other columns should expand equally in height take remaining space.

say column 1 has 3 rows, each 50px tall. column 2 must have 1 row 150px tall. if column 3 has 2 rows must each 75px tall. below pictures further illustrate i'm after.

is possible css?

enter image description here

if don't mind working in small handful of browsers, can absolutely pure css. go ahead, add , remove many grandchild divs want:

http://codepen.io/cimmanon/pen/ldmtj

/* line 5, ../sass/test.scss */ .wrapper {   display: -webkit-flexbox;   display: -ms-flexbox;   display: -webkit-flex; } @supports (display: flex) , (flex-wrap: wrap) {   /* line 5, ../sass/test.scss */   .wrapper {     display: flex;   } }  /* line 9, ../sass/test.scss */ .a, .b, .c {   display: -webkit-flexbox;   display: -ms-flexbox;   display: -webkit-flex;   -webkit-flex-flow: row wrap;   -ms-flex-flow: row wrap;   flex-flow: row wrap; } @supports (display: flex) , (flex-wrap: wrap) {   /* line 9, ../sass/test.scss */   .a, .b, .c {     display: flex;   } } /* line 13, ../sass/test.scss */ .a div, .b div, .c div {   border: 1px solid;   -webkit-flex: 1 0 100%;   -ms-flex: 1 0 100%;   flex: 1 0 100%; }  /* fancy up! */ /* line 21, ../sass/test.scss */ .a {   background: #ff9999;   -webkit-flex: 1 1 10em;   -ms-flex: 1 1 10em;   flex: 1 1 10em; }  /* line 26, ../sass/test.scss */ .b {   background: #00e600;   -webkit-flex: 1 1 10em;   -ms-flex: 1 1 10em;   flex: 1 1 10em; }  /* line 31, ../sass/test.scss */ .c {   background: #9999ff;   -webkit-flex: 1 1 40%;   -ms-flex: 1 1 40%;   flex: 1 1 40%; }  <div class="wrapper">   <div class="a">     <div>a</div>     <div>a</div>     <div>a</div>     <div>a</div>     <div>a</div>   </div>    <div class="b">     <div>b</div>   </div>    <div class="c">     <div>c</div>     <div>c</div>   </div> </div>

browser support: opera, chrome, ie10. when firefox gets around finishing supporting current flexbox draft including flex-wrap, work there well.


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more