- Break point : 480px
- Modern Browser & IE7/8 O.K. (Use selectivizr 1.0.3)
- 3,4,5 column
- You can use list tags instead of div tags
Last active
December 22, 2015 05:09
-
-
Save takunagai/6421833 to your computer and use it in GitHub Desktop.
A Pen by Oreo3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Image & Text, 3colomn</h2> | |
<div class="grid_block cells3"> | |
<div class="grid_block_inner"> | |
<div class="cell"> | |
<p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p> | |
<div class="text_area"> | |
<h1>header(h1)</h1> | |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text(p)</p> | |
</div> | |
</div> | |
<div class="cell"> | |
<p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p> | |
<div class="text_area"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown printer took a galley of type(p)</p> | |
</div> | |
</div> | |
<div class="cell"> | |
<p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p> | |
<div class="text_area"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown printer took a galley of type(p)</p> | |
</div> | |
</div> | |
<div class="cell"> | |
<p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p> | |
<div class="text_area"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown printer took a galley of type(p)</p> | |
</div> | |
</div> | |
<div class="cell"> | |
<p class="img_area"><img src="http://dummyimage.com/300x200/999/fff.png" width="300" height="200" /></p> | |
<div class="text_area"> | |
<h1>header(h1)</h1> | |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's(p)</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<h2>Text only, 4colomn</h2> | |
<div class="grid_block cells4"> | |
<div class="grid_block_inner"> | |
<div class="cell"> | |
<h1>header(h1)</h1> | |
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum(p)</p> | |
</div> | |
<div class="cell"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown(p)</p> | |
</div> | |
<div class="cell"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown(p)</p> | |
</div> | |
<div class="cell"> | |
<h1>header(h1)</h1> | |
<p>ever since the 1500s, when an unknown(p)</p> | |
</div> | |
</div> | |
</div> | |
<!-- Use selectivizr 1.0.3 --> | |
<!--[if (gte IE 6)&(lte IE 8)]> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> | |
<![endif]--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Equal Height Blocks in Rows by CHRIS COYIER(CSS Tricks) | |
http://css-tricks.com/equal-height-blocks-in-rows/ | |
http://codepen.io/micahgodbolt/full/FgqLc | |
It's been modified into a function called at page load and then each time the page is resized. | |
One large modification was to remove the set height before each new calculation. */ | |
equalheight = function(container) { | |
var currentTallest = 0, | |
currentRowStart = 0, | |
rowDivs = new Array(), | |
$el, | |
topPosition = 0; | |
$(container).each(function() { | |
$el = $(this); | |
$($el).height('auto'); // added | |
topPostion = $el.position().top; | |
if (currentRowStart != topPostion) { | |
// we just came to a new row. Set all the heights on the completed row | |
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
// set the variables for the new row | |
rowDivs.length = 0; // empty the array | |
currentRowStart = topPostion; | |
currentTallest = $el.height(); | |
rowDivs.push($el); | |
} | |
else { | |
// another div on the current row. Add it to the list and check if it's taller | |
rowDivs.push($el); | |
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); | |
} | |
// do the last row | |
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
}); | |
} | |
// excute when the page is roaded/resized | |
$(window).load(function() { | |
if($('body').width() >= 481){ | |
equalheight('.grid_block .cell'); | |
} | |
}); | |
$(window).resize(function() { | |
if($('body').width() >= 481){ | |
equalheight('.grid_block .cell'); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
img { | |
max-width: 100% !important; | |
height: auto !important; | |
width: auto\9;/*IE6-8 but and 9.. :(*/ | |
} | |
.grid_block {} | |
.grid_block .cell { | |
margin-top: 0; | |
margin-bottom: 20px; | |
outline: 1px dotted green;/*text*/ | |
/*padding: 15px 1.5%;//if you want to make margin in each cell, Set padding and subtract (this value x 2 %) from cell width*/ | |
} | |
.grid_block.float_img .cell h1 { | |
word-break: break-all !important;/*not working.. :(*/ | |
} | |
.grid_block h1 { | |
margin-bottom: 0.5em; | |
color: #842535; | |
} | |
.grid_block.float_img .cell img { | |
float: left; | |
margin-right: 10px; | |
margin-bottom: 5px; | |
vertical-align: bottom; | |
} | |
.grid_block li.cell { | |
padding-left: 0; | |
list-style: none; | |
} | |
/*When using SCSS or LESS, Use Inheritance of clearfix*/ | |
.grid_block, | |
.grid_block .cell { | |
zoom: 1; | |
} | |
.grid_block:after, | |
.grid_block .cell:after { | |
content: ""; | |
display: block; | |
clear: both; | |
} | |
.grid_block .cell p.img_area { | |
margin-top: 0; | |
} | |
@media only screen and (max-width: 480px) { | |
.grid_block .cell { | |
clear: left; | |
} | |
.grid_block .cell .img_area { | |
float: left; | |
max-width: 40% !important; | |
margin-right: 20px; | |
} | |
.grid_block .cell .text_area { | |
overflow: hidden; | |
_zoom: 1;_height: 1%;/*IE6*/ | |
} | |
} | |
@media only screen and (min-width: 481px) { | |
.grid_block .cell { | |
float: left; | |
margin-left: 3%; | |
} | |
.grid_block .cell .img_area { | |
text-align: center; | |
} | |
.grid_block.cells2 .cell {width: 48.5%; width: 48%\9;/*IE6-8 but and 9..*/} | |
.grid_block.cells3 .cell {width: 31.333333333%; width: 31%\9;} | |
.grid_block.cells4 .cell {width: 22.75%; width: 21%\9;} | |
.grid_block.cells2 .cell:nth-child(2n+1), | |
.grid_block.cells3 .cell:nth-child(3n+1), | |
.grid_block.cells4 .cell:nth-child(4n+1) { | |
/* clear: left; */ | |
margin-left: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment