html - zurb foundation splitting one row into two columns -
updated
<div class="container"> <div class="row"> <div class="main 8 columns" > <div class="row"> <div class="main 4 columns"> <a href="#" class="button" data-dropdown="drop1">has dropdown</a> <ul id="drop1" class="f-dropdown" data-dropdown-content> <li id="halfanhour">half hour</li> <!-- in half hour--> <li><a href="#">this another</a></li> <!-- in 1 hour --> <li><a href="#">yet another</a></li> <!-- in 1.5 hour --> <li><a href="#">yet another</a></li><!--in 2 hours--> <li><a href="#">yet another</a></li><!-- in 2.5 hours--> </ul> </div> <div class="main 4 columns"> estimated wait time </div> </div> </div> </div> <div class="row"> <div class="main 8 columns"> <div class="element"> <div class="waittime"> <%= @shakelines['average_line_wait_secs'][0]%><br/> <div class="minute"> minutes </div> </div> </div> </div> </div> <div class="row"> <div class="eight columns"> <div class="footer"> powered placemeter labs </div> </div> </div> </div>
i have container row. set div columns 8 columns. want split div 4 columns each. first column belongs text estimated wait time
, other drop down box should take care of rest of 4 columns. expect rendered in 1 row estimated wait time
rendered below drop down box. want estimated wait time float left of columns , drop down box float right of columns.
the column class names should using newest grid class name syntax. need specify screen size , number.
for example, change this:
class="main 4 columns"
to this:
class="main small-4 large-4 columns"
source: http://foundation.zurb.com/docs/components/grid.html
Comments
Post a Comment