Having problems centering a textbox in CSS - php
I have the following code in PHP:
<div class="col-lg-4 col-sm-6">
<br>
<a class="portfolio-box">
<div class="project-category">test-category</div>
<img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="br"></div>
<div class="project-category text-white-50">test-category</div>
<div class="project-name">test-name</div>
<div class="br"></div>
<div class="project-description">test-description</div>
<div class="br"></div>
</div>
</a>
</div>
This code creates the following box:
The respective CSS code looks like this:
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 95%;
height: auto;
position: absolute;
bottom: 0;
text-align: center;
opacity: 0;
color: #fff;
background: #963d32;
transition: opacity 0.25s ease;
padding-left: 40px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
#portfolio .img-fluid {
max-width: 95%;
height: auto;
}
However - no matter what I do - the textbox over the picture (as you can see in the picture above) is never perfectly centered.
How can I center the textbox over the picture?
Best
Changing the margin-left to 2.5% solved the problem for me. Thank you very much #bartholomew
Related
Hover text assistance
<div class="col-md-4"> <div class="top-bar-right"> <div class="social"> <a href=""> <img src="img/member_login1.png" height="40" width="40" > </a> </div> I am attempting to show text titled "LogIn" when one hovers over the member_login image
with my code this might help..
body{
background-color: #000;
}
.container{
display: flex;
justify-content: space-around;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
figure{
width: 5rem;
height: 5rem;
clip-path: circle(50% at 50% 50%);
cursor: pointer;
position: relative;
}
img {
width: 100%;
height: 100%;
transform: scale(0.75);
transition: all 0.4s ease;
}
figcaption{
color: white;
font-size: 0.9rem;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
transition: all 0.6s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
}
figure:hover img{
transform: scale(0.5);
filter: blur(4px) brightness(70%);
}
figure:hover figcaption{
opacity: 1;
transform: translate(-50%, -50%);
}
<html>
<head>
<title>Membuat Efek Hover Pada Image Caption</title>
</head>
<body>
<div class="container">
<figure>
<img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
<figcaption>
Login
</figcaption>
</figure>
</div>
</body>
</html>
All you need is the title attribute! <div class="col-md-4"> <div class="top-bar-right"> <div class="social"> <a href=""> <img src="https://www.nasa.gov/images/content/296673main_scn1-226.jpg" title="Hover to see me!" > </a> </div> </div> </div>
If you want more control over the styling of the hover text, use a span or something and set it to display: none when the preceding image is not being hovered.
.social {
position: relative;
}
.tooltip {
position: absolute;
top: 2px;
left: 2px;
color: saddlebrown;
background-color: white;
padding: 2px;
z-index: 2;
}
img:not(:hover) + .tooltip:not(:hover) {
display: none;
}
<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/420px-LotusBud0048a.jpg" height="40" width="40" >
<span class="tooltip">LogIn</span>
</a>
</div>
</div>
</div>
How do I stack two landscape pictures on top of each other with a portrait picture on the side?
link to example Getting the black portrait box is easy, but how do I create something like the two red boxes right on top of each other? I know one solution is to export the two landscapes with the gap as one image and put it in as a portrait but I'd prefer to not do it like that.
This is a start for you.
.row {
display: flex;
}
.row div {
width: 50%;
}
div {
margin: 20px;
}
img {
width:100%
}
<div class="container">
<div class="row">
<div class="first">
<img src="https://placehold.it/400x800/ccc/666?text=" class="img-responsive" alt="">
</div>
<div class="two">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
</div>
</div>
</div>
<div class="main">
<div class="flexbox">
<div class="row"><img src="https://via.placeholder.com/150"/>
</div>
<div class="row image-wrapper">
<div class="col"><img src="https://via.placeholder.com/150"></div>
<div class="col"><img src="https://via.placeholder.com/150"></div>
</div>
<div>
</div>
.main {
width: 500px;
}
.flexbox {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
width: 100%;
height: 250px;
box-sizing: border-box;
padding: 10px;
}
.col img {
background: red;
width: 100%;
height: 100%;
}
.row {
width: 50%;
height: 500px;
padding: 10px;
box-sizing: border-box;
}
.row img {
background: black;
width: 100%;
height: 100%;
}
.row.image-wrapper {
padding: 0;
}
https://codepen.io/stargroup0075/pen/ExjMPXK
How do a make an image zoomed in and not stretched when the screen is too large?
I am using bootstrap 4 inside my wordpress theme. I am trying to make a slide show on the top of my page but the images are stretching out when the size is not 100%.
How do I make the images zoom instead of stretching. I have tried applying
.cover {
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover;
}
class to my tag.
This is the code for where I want to add the image.
<div class="carousel-inner">
<div class="carousel-item active">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/1.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 1</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/2.jpg');?>" >
<div class="carousel-caption">
<h3>Voorbeeld 2</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/3.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 3</h3>
<p>Voorbeeld beskrywing.</p>
</div>
</div>
</div>
You're expecting image source (src) to be treated as background-image.
Might be !important to you, but it won't happen.
You probably want to show the image as background of parent (I moved cover class on parent):
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
/* You don't need anything below this point. Just for SO example */
body {
margin: 0;
}
.cover {
position: relative;
}
.cover .caption{
width: calc(100% - 60px);
height: calc(100% - 60px);
left: 30px;
top: 30px;
background-color: #42424242;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
border: 1px solid #ffffff35;
box-shadow: 0 5px 6px -3px rgba(0,0,0,.1), 0 9px 12px 1px rgba(0,0,0,.07), 0 3px 16px 2px rgba(0,0,0,.06)
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
This lets the <img> still set the height of the slide but won't show it, so the background can be viewed. Obviously, you need to do it for each of the items.
Jssor Slider Bootstrap Compatibility
I'm developing a website which is bootstrap compatible. In my website I'm also using a jssor image slider. The slider works perfectly but in bootstrap mode, it goes off to the right as shown here.
The slider works fine for me on normal web browsers but when I use the site on mobile devices or in bootstrap mode I face this problem.
For your reference I'm putting below the HTML code and jQuery code of the slider. All the necessary library files have been included.
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 500);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 500);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/002.jpg" />
<!--<div data-u="caption" data-t="0" style="position: absolute; top: 320px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;"></div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
<!--<div data-u="caption" data-t="1" data-3d="1" style="position: absolute; top: -50px; left: 125px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">time lined layer animation</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/003.jpg" />
<!--<div data-u="caption" data-t="2" style="position: absolute; top: 30px; left: -380px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">finger catchable right to left</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
<!--<div data-u="caption" data-t="3" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">responsive, scale smoothly</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
<!--<div data-u="caption" data-t="4" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.6); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">image, text, and custom layers</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
<!--<div data-u="caption" data-t="5" style="position: absolute; top: 30px; left: 600px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">tons of transition type</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
<!--<div data-u="caption" data-t="6" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">visual slider maker</div>-->
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
<!--<div data-u="caption" data-t="7" style="position: absolute; top: -50px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">play in and play out</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
<!--<div data-u="caption" data-t="8" data-3d="1" style="position: absolute; top: 25px; left: 150px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6); overflow: hidden;">-->
<!--<div data-u="caption" data-t="9" style="position: absolute; top: 100px; left: 25px; width: 200px; height: 50px; font-size: 24px; line-height: 50px;">A Child Layer</div>-->
<!--</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
<!--<div data-u="caption" data-t="10" data-3d="1" style="position: absolute; top: 25px; left: 100px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6);">
<div style="margin: 15px; font-size: 20px;">
<p>This is full customized content layer.<br />
</p>
<p>
Everything is allowed
</p>
You can put
<a href="http://wwww.jssor.com">
a link
</a> or an image
<img src="img/icon_chrome.png" /> here.
</div>
</div>-->
</div>
<a data-u="ad" href="http://www.jssor.com" style="display:none">Responsive Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
Could anyone here help me style this properly so it is bootstrap compatible?
With the code posted above, the slider will fit the width of parent container. Please check the width of the parent container.
using flexbox to get pinterest or jQuery masonry layout
Wanted to know if it is possible to get the same type of design layout as pinterest or jQuery masonry using only the new flexbox layout. Here is as far as I got it:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
width: 220px;
height: 250px;
margin: 10px auto;
padding: 0;
background: #ccc;
}
.item:nth-child(3n+2) {
background: #aaa;
height: 400px;
}
and the HTML I am just using a PHP loop to create 12 items
<?php
for ($i=0; $i<=11; $i++) {
echo '<div class="item"></div>';
}
?>
It is entirely possible.
Thanks to #leopld's original answer, I was able to create one that does not depend on a fixed height.
By making the flex container position: absolute or position: fixed, you are able to get it to fill the available space dynamically.
Link to the Codepen: http://codepen.io/anon/pen/Jpnyj?editors=110. I included all the vendor prefixes you'd need at this time.
Markup
<div class="wrapper">
<div class="box box-red"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-brown"></div>
<div class="box box-red"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-red"></div>
<div class="box box-brown"></div>
<div class="box box-blue"></div>
<div class="box box-red"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-brown"></div>
</div>
Styles
body {
background: black;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.box {
margin: 5px;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-red {
height: 100px;
background: red;
}
.box-blue {
height: 120px;
background: blue;
}
.box-pink {
height: 144px;
background: pink;
}
.box-purple {
height: 250px;
background: purple;
}
.box-green {
height: 200px;
background: green;
}
.box-yellow {
height: 20px;
background: yellow;
}
.box-brown {
height: 290px;
background: brown;
}
CSS3's columns will get you pretty close to that layout. (Note that support in non-recent browsers may be poor, and the spec may change in the future.) The other example didn't work with FF, but this one does:
HTML:
<div id="wrapper">
<div id="cols">
<div class="item">
<img src="http://placekitten.com/400/700?image=1" />
<p>0) Craft beer farm-to-table.</p>
</div>
<div class="item">
<img src="http://placekitten.com/400/450?image=2" />
<p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
</div>
[more items]
</div>
</div>
CSS:
h1, h2, ul, p { margin: 1rem; }
#wrapper {
width: 900px;
margin: 20px auto;
padding: 10px;
outline: solid black 1px;
background-color: gainsboro;
}
#cols {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
display: inline-block;
background: #FEFEFE;
margin: 0;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 10px;
}
.item img {
width: 100%;
border-bottom: 1px solid black;
padding-bottom: 10px;
margin-bottom: 5px;
}
.item p {
font-size:small;
margin: 0;
}
Or play with the full example.
Update: To my knowledge, there is no way of doing this with Flexbox. Flexbox is more concerned with horizontal layout, not vertical. I would be happy to be proven wrong, but that’s what I’ve gathered from my limited experience with it. If you want to learn more, the best article I’ve found on the matter is this: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Yes, of course it’s Chris Coyier. How’d you ever guess?) In any case, even if you can do it with Flexbox it would be a bit of a hack, because that isn’t what Flexbox is for. There’s a much cleaner way of doing it with CSS3 columns. Here’s an example. Browser support isn't the greatest though: http://caniuse.com/#search=column%20layout Even this example doesn't seem to support Firefox, although I haven't a clue why, since FF does indeed support the respective properties, according to CanIUse. So, a summary and TLDR: it's an admirable idea, doing this in pure CSS, but for most practical purposes is impossible at the moment. You would probably be better to go with JQuery Masonry
You can actually do it without any greater hassle using flexbox. The only drawback is that you have to specify an absolute height for the wrapper, in order to make the content of it actually wrap. Otherwise it would all be laid out along one great, never ending column.
The HTML:
<div class="wrapper">
<div class="red"></div>
<div class="blue"></div>
<div class="pink"></div>
<div class="purple"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="brown"></div>
</div>
The (unprefixed) CSS:
.wrapper {
background: black;
display: flex;
flex-flow: column wrap;
height: 450px;
align-items: center;
}
.wrapper > div {
height: 100px;
margin: 5px;
width: 100px;
}
.wrapper > :nth-child(3n+2) {
border: 2px solid white;
height: 300px;
}
I made a JS Fiddle as well, so you can see the result directly.
In a nutshell however, the trick is to use flex-direction: column in combination with flex-wrap: wrap and a fixed height for the wrapper.
I have to add, though - this seems like just the scenario that the CSS columns spec was written for, so KatieK's solution might be a better way to go. Above all, one doesn't need to specify a fixed height for the wrapper when using CSS columns instead of flexbox.