html - CSS/jQuery image grid layout -

-

i have read many threads image grid layouts using jquery or sole css, mine little bit different have read using columns differing widths.

i purposely not pasting code @ point due fact have tried various different methods code seems no longer 'nice'.

as can see page: http://tinyurl.com/poxn4un - trying acheive images (in our work section) laid out how bottom 2 slotting nicely between 2 edge images.

i have tried masonry no success , tried flexbox in use @ point. appreciated wish learn other projects.

thanks, adrian

you use flex-box combination layout this.

here's example:

jsfiddle example

and here's css , html powering it:

* {      box-sizing: border-box;  }  .bricks {      display: flex;      height: 450px;      flex-direction: row;  }  .bricks > * {      border: solid 1px #222;  }  .sidebar {      flex: 0 0 220px;      background-image: url(https://placehold.it/220x450/075883);  }  .center-contain {      flex: 0 0 402px;      font-size: 0;  }  .center {      display: inline-block;      background-image: url(https://placehold.it/200x225);      border: solid 1px #e5e5e5;      height: 225px;  }  .center.m {      width: 200px;  }  .center.lg {      width: 300px;  }  .center.sm {      width: 100px;  }
<div class='bricks'>      <div class='sidebar sidebar-left'></div>      <div class='center-contain'>          <div class='center sm'></div>          <div class='center lg'></div>          <div class='center m'></div>          <div class='center m'></div>      </div>      <div class='sidebar sidebar-right'></div>  </div>


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana
Read more

php - How do you embed a video into a custom theme on WordPress? -

-
i'm using wordpress 4.2.3 , created custom theme use. when try embed youtube video (pasting http:// link content area), video shows in edit content area, when view site, shows text url instead. i tried sorts of things clear formatting, removing link, unchecking settings in writing area, etc. temporarily switched default wp theme , video shows up, i'm missing in template code, , can't figure out what. here code used outputting content in template. index.php <div class="video"> <?php $post_id = 26; $queried_post = get_post($post_id); echo $queried_post->post_content; ?> </div> thanks - appreciate it!
Read more