html - CSS - unexpected floating issue -

-

i learning floating elements in css , encountered following peculiar behavior.

here code

<!doctype html>  <html lang="en">  <head>      <meta charset="utf-8">      <title>title</title>      <style>            #one { background-color: red; width: 200px; height: 200px; margin: 10px; }          #two { background-color: yellow; width: 200px; height: 205px; margin: 10px; }          #three { background-color: lightpink; width: 200px; height: 200px; margin: 10px; }          #four { background-color: green; width: 200px; height: 200px; margin: 10px; }          #five { background-color: coral; width: 200px; height: 200px; margin: 10px; }          #six { background-color: #b1ffea; width: 200px; height: 200px; margin: 10px; }            div{              /*display: inline-block;*/              float: left;              vertical-align: central;          }          </style>    </head>  <body>       <div id="one">         first div     </div>       <div id="two">        second div     </div>       <div id="three">         3 div     </div>        <div id="four">         4 div     </div>        <div id="five">         5 div      </div>        <div id="six">         6 div     </div>    </body>  </html>

enter image description here

my question why "four div" placed below "third div" not first , second ?

on other hand, if resize browser (see image below) why in case working ?

enter image description here

because second div element taller first div, forth div collides second div. when forth div drops next line, starts on right , slides left, beginning under third div, until collides second div. if @ code @ 4 div elements per line, fifth div drops next line. begins below fourth div , beginning moving left until collides second div, because second div longer third or fourth div elements.

enter image description here


Comments

Post a Comment

Popular posts from this blog

Formatting string according to pattern without regex in php -

-
how can format arbitrary string according flexible pattern? solution came using regular expressions, need 2 "patterns" (one search , 1 output). example: $str = '123abc5678"; desired output: 12.3ab-c5-67.8 i use pattern in variable (one user can define without knowledge of regular expressions) this: $pattern = '%%.%%%-%%-%%.%'; so user have use 2 different characters (% , .) a solution regex this: $str = '123abc5678'; $pattern_src = '@(.{2})(.{3})(.{2})(.{2})(.{1})@'; $pattern_rpl = "$1.$2-$3-$4.$5"; $res = preg_replace($pattern_src, $pattern_rpl, $str); //$res eq 12.3ab-c5-67.8 way complicated since user need define $pattern_src , $pattern_rpl. if string vary in length, more complex explain. yes, write function/parser builds required regular expressions based on simple user pattern %%.%%%-%%-%%.%. wonder if there "built in" way achieve php? thinking sprintf etc., doesn't seem trick. ideas? ...
Read more

c - zlib and gdi32 with OpenSSL? -

-
this follow question undefined reference rsa_generate_key in openssl? have openssl program generate rsa key, follows : #include <stdio.h> #include <openssl/rsa.h> #include <openssl/pem.h> int main(int argc, char* argv[]) { rsa *r = null; int ret; r = rsa_new(); bignum *bne = null; ret = rsa_generate_key_ex(r, 2048, bne, null); return 0; } when compile gcc -i../include rsatest.c -lcrypto -l. i undefined reference errors functions in libraries gdi32 , zlib. so correct this, have add -lz , -lgdi32, as gcc -i../include/ rsatest.c -lcrypto -lz -lgdi32 -l. my question is, aren't static libcrypto , libssl self sufficient? in why having add libraries make work? there option should have added while compiling library prevent this? i'm using 64 bit windows mingw compiler. made openssl library of msys , make.
Read more

java - inputmismatch exception -

-
Image
this question has answer here: scanner skipping nextline() after using next(), nextint() or other nextfoo()? 14 answers import java.util.*; public class ngg { static scanner numberentered; static scanner userinput = new scanner(system.in); static int guessednumber; static int randomnumber = (int) (math.random()* 11); static scanner reply; static string answer; public static void main(string[] args) { guesschecker(guessednumber); } public static void guesschecker(int userguess) { while (userguess != randomnumber) { intro(); userguess = intchecker(); if (userguess == randomnumber) { system.out.println("congradulations!"); system.exit(0); } else { system.out.println("that incorrect!");...
Read more