html - Aligning the contents of my footer properly -


as add more links footer layout expands , set of lists each column becomes misaligned.

i want ensure each list set each column align horizontally in same row. e.g. title each column in same row

levi | using levi | legal

the below image has column headers misaligned! :(. how align them when add more list alignment of content in each column remains constant.

enter image description here

this exmaple of how want footer look.

enter image description here

here jsfiddle of how

this html : 

<md-layout id = "container" style = "max-height:40px;">          <md-layout md-column  md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">                    <md-list>                     <md-list-item  class = "md-display-2">levi</md-list-item>                            <router-link :to = "{ name: 'about' }"><md-row>about</md-row></router-link>                             <md-row >customers</md-row >                              <md-row >contact us</md-row >                          <md-row >support</md-row >                          <md-row >support</md-row >                          <md-row >support</md-row >                       <md-row >support</md-row >                       <md-row >support</md-row >                       <md-row >support</md-row >          <md-row >support</md-row >                <md-row >support</md-row >                  <md-row >support</md-row >                  <md-row >support</md-row >                  <md-row >support</md-row >                  <md-row >support</md-row >                  <md-row >support</md-row >                   </md-list>                          </md-layout>   <md-layout md-column  md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">                 <md-row class = "md-display-2" >using levi</md-row >                     <md-row >business</md-row >                     <md-row > <router-link class = "" :to = "{ name: 'product' }">                         features                     </router-link> </md-row>                         <md-row >pricing</md-row >                          <md-row >pricing</md-row >                    </md-layout>                       <md-layout md-column md-gutter  md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">                      <md-column class = "md-display-2">legal</md-column>                     <md-column></md-column>                         <md-column></md-column>  </md-layout>

using flexbox best solution question. can use it. example in codepen shows how can make such footer. in example, used flexbox, since promising display layout method. there many rules supported modern browsers in flexbox. make use of , make whatever want. best

html code:-

<div class='container'>   <ul class="list">     <li class="list-heading">one</li>     <li>two</li>     <li>three</li>     <li>four</li>     <li>five</li>     <li>six</li>     <li>seven</li>     <li>eight</li>   </ul>   <ul class="list">     <li class="list-heading">one</li>     <li>two</li>     <li>three</li>     <li>four</li>     <li>five</li>   </ul>   <ul class="list">     <li class="list-heading">one</li>     <li>two</li>     <li>three</li>     <li>four</li>     <li>five</li>     <li>six</li>     <li>seven</li>     <li>eight</li>   </ul> </div>

css:-

.container {   display: flex;   max-width: 600px;   border: 1px solid #ddd; } .list {   flex-grow: 1;   padding-left: 20px;   list-style: none;   border-left: 1px solid #ddd; } .list-heading {   font-size: 18px;   font-weight: bold; }

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more