css - Spacing out floating elements with both sides of a container -


i have floating elements laid out grid , want make them flush both left , right sides of container while retaining internal separation.

here's example red squares floating 50x50 divs 10 pixels of separation inside blue div fixed width , auto-height.

http://i.stack.imgur.com/ln8jf.png

enter image description here

<div class='blue' style='width: 110px'>     <div class='red'></div>     <div class='red'></div> </div>  <div class='blue' style='width: 110px'>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div> </div>  <div class='blue' style='width: 170px'>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div>     <div class='red'></div> </div>

here's relevant fiddle: https://jsfiddle.net/sujadkvb/5/

i want make red squares flush left , right sides of blue square. blue square can of several widths , red squares can added or hidden nth-of-type selector modifies margins on specific red squares isn't practical.

this solved giving blue squares negative right-padding css spec disallows negative padding unspecified reason i'm stuck. don't see how can justify allowing negative margins disallowing negative padding.

here 1 way of realizing layout using inline-blocks instead of floated elements.

first, .blue containing block, set following css properties: text-align: justify , line-height: 0.

second, .red child elements, remove float property , add display: inline-block.

the result .red elements inline , spaced evenly in line within width of .blue container. since hard-coded nice value of width .blue, horizontal spacing want between .red blocks (no need set right margin).

the remaining issue text-align: justify final line not stretch fill full width (this how justify setting works in order prevent short lines being stretched out in ugly fashion).

to work around this, add pseudo-element .blue:after inline-block of width 100%. force new line created after red blocks, , result red blocks left/right justified.

the line-height: 0 on .blue , vertical-align: top on .blue:after take care of white space @ bottom due line leading (space above , below baseline of text).

.blue {      margin-top: 10px;      background-color: #00a2e8;      height: auto;      overflow: auto;      padding-bottom: 10px;      text-align: justify;      line-height: 0;  }  .blue:after {      content:'';      display: inline-block;      width: 100%;      vertical-align: top;  }  .red {      background-color: red;      width: 50px;      height: 50px;      display: inline-block;      margin-top: 10px;  }
<div class='blue' style='width: 110px'>    <div class='red'></div>    <div class='red'></div>  </div>  <div class='blue' style='width: 110px'>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>  </div>  <div class='blue' style='width: 170px'>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>    <div class='red'></div>  </div>


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more