css - How to Create Grid/Tile View? -

-

for example, have class .article, , want view class grid view. applied style:

.article{   width:100px;   height:100px;   background:#333;   float:left;   margin:5px; }

that style make .article tiled/grid. it's work fine fixed height. if want set height auto (automatically stretch according data within it), grid nasty.

enter image description here

and want make view this:

enter image description here

this type of layout called masonry layout. masonry grid layout fill out whitespace caused difference height of elements.

jquery masonry 1 of jquery plugin create masonry layout.

alternatively, can use css3 columns. jquery based plugin best choice since there compatibility issue css3 column.


Comments

Post a Comment

Popular posts from this blog

How to start daemon on android by adb -

-
can me please, head swollen... i trying run daemon on android emu/device command: adb -s <device_name> shell su -c /dir/daemon <port_number> but nothink happens, , no errors! if do: adb -s <device> shell and form shell cmdline: su -c /dir/daemon <port_number> than work fine. try use shell-script , run: adb -s <device_name> shell sh su -c /dir/script.sh <port_number> and try generate script qt code port number , use: adb -s <device_name> shell sh su -c /dir/script.sh but not helped... problem if enter adb shell previous run daemon - work. problem on different device/emu/iso_image different command format not work. example: adb -s <device_name> shell su -c /dir/daemon <port_number> // work @ emu, not @ iso and vice: adb -s <device_name> shell su -c "/dir/daemon <port_number>" // work @ iso etc. everybody can answer what's matter? sorry english adb shell su -c ...
Read more

testing - Detect whether test has failed within fixture -

-
i debugging intermittent test failure. purposes want dump lot of debug information if test failed. dumping debug stuff quite slow process produces lot of data, not want every test. i using pytest , yield autouse fixture should work great @pytest.yield_fixture(scope="function", autouse=true) def dump_on_failue(request): prepare_debug_dump() yield if test_failed(request): debug_dump() the problem can't figure out how detect whether test has failed or not. there a questions already , note on pytest website : if request.node.rep_setup.failed: print ("setting test failed!", request.node.nodeid) elif request.node.rep_setup.passed: if request.node.rep_call.failed: print ("executing test failed", request.node.nodeid) unfortunately code not work anymore. there no rep_setup , rep_calls symbols in node object. tried dig request , node object, no luck. anybody knows how detect whether test ...
Read more

Angularjs unit testing - ng-disabled not working when adding text to textarea -

-
i trying test angularjs component using karma, mocha, power-assert. have textarea , button in component, button disabled based on length of text in textarea. when run component in browser works perfectly. can't figure out how test functionality. here's bit of code. inquiryform.js function inquiryform($scope) { // plan add logic here } angular.module('myapp').component('inquiryform', { controller: inquiryform, controlleras: 'inquiryform', templateurl: 'inquiryform.html' }); inquiryform.html <div class="contact"> <div>thanks contacting us.</div> <form> <textarea ng-model="inquiryform.inquirytext" name=""></textarea> <input type="submit" value="send" ng-disabled="!inquiryform.inquirytext.length"> </form> </div> inquiryformtest.js describe('inquiry form ', () => { let $r...
Read more