This is a follow-up question from this post:
HTML / CSS How do I force images to horizontally display
The code below will display 6 figures. Each figure contains a single image with a caption. The figures are laid out 3 horizontally in 2 vertical groups. Now I want to add an additional image to each of my figures directly below (vertical) the first image. Rest of the layout should remain the same. How do I do that? (I added the extra example image in each figure, but it displays horizontally instead of vertically.)
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Simply put a <br> between the two images, i.e.
<img src="example.jpg"/><br>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
Related
I am trying to create a responsive image gallery for my website using a flexbox. However, I am trying to make it wrap to the next line and stay in order, which I am having trouble with. For example:
Desktop
1,2,3
4,5,6 etc
Tablet
1,2
3,4 etc
Mobile
1
2 etc
Please see the example code I included.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33%;
max-width: 33%;
}
.column img {
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 2</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 3</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
The first thing I would do is nest it in a container. Flex works in order of the markup so I switched your order back to the correct numerical order. Then, what I would do is nest each of your figure's in their own div. I just used your column div to demonstrate. Then remove the media queries and let flex do its thing.
The main issue was you were trying to split them up in rows of 3 but had 2 nested per div, and were trying to set max-width to the div. To have a row of 3 they should be nested in their own div's with width: 33%;
EDIT ~ I made the min-width: 200px;because your image renders at about 160px. 200px would be a good breaking point on mobile devices. Check your dev tools for mobile.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
min-width: 200px;
width: 33.33%;
}
.container {
margin: auto;
width: 100%;
}
<div class="container">
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
</div>
Your HTML elements are set up incorrectly. To achieve what you want, you shouldn't put in the same element "first" and "fourth". While it looks good on desktop, you won't be able to put element "second" or "third" between them. You will only be able to change the position of those elements inside of the . Very basic HTML and CSS stuff.
I would advise you to rename class "column" to "cell" and put them in order:
<div class="row">
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
And of course in your CSS file change the .column to .cell
This way you will achieve your wanted responsive look on tablet and mobile.
While testing the desktop version of a template I am creating in Chrome I noticed when my figcaptions are all the same (example: Caption) or similar (example: Caption One... Caption Two) my images and caption line up fine. Once I make them unique the images start to change sizes and nothing lines up correctly. I'm not adding any sort of crazy captions, just simple one or two word descriptions like "Hello World" or "Example Caption". I have ran it through dev tools and looked at a few other posts on stack overflow about issues concerning figcaptions but noting seems to be working. All of my images are the same size. I'm sure it is something simple that I am just overlooking but I would appreciate a new set of eyes at this point. Thanks in advance for your time and assistance.
* {
margin: 0;
padding: 0;
}
.content-section {
display: grid;
grid-template-columns: auto auto auto;
}
figure img {
width: 100%;
height: auto;
}
<!--lines up correctly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
</section>
<!--lines up incorrectly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Some Words</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Hello World</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Something Else</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption Five</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Example</figcaption>
</figure>
</section>
and answering my own question...
.content-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Lines up perfect
So I have a table that I'm trying to make. Essentially, it will be two rows of three images each, with very short text below each one.
My structure looks like this:
<div class="mission-statement-1">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
<div class="mission-statement-2">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
I have the two main div elements with display: block with a width of 100%, so that they'd be one under the other. The inner divs are display: inline, so that they would be next to each other, and are given a width of 30%.
If I have just images alone, this works as intended. However, I'm trying to have the text centered underneath each image, and adding text will mess up the intended layout. If I use a block text element, such as a p, then I'll have six rows of one item each. If I stick with the span, then the text comes after the image (as it should given its inline property). I can't seem to make it work the way that I want it to.
Any help?
Try giving your inner divs display: inline-block;.
inline-block elements maintain the support of block styles, such as defined width and height, but can be rendered next to other objects like inline elements.
.mission-statement-1,
.mission-statement-2{
display:block;
}
.iconDiv{
display:inline-block;
text-align:center;
}
img{
background-color:green;
width:100%;
height:100%;
}
<div class="mission-statement-1">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text1</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text2</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text3</figcaption>
</figure>
</div>
<div class="mission-statement-2">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text4</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text5</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text6</figcaption>
</figure>
</div>
You can Html figure and figcaption tags.
Try using Flex with some CSS. It'll also work as a better way to have a responsive table that's mobile friendly. Also, use the tags Figure and FigCaption which will basically glue the text to the images.
.parent-wrapper {
height:100%;
width:100%;
}
.parent {
display: flex;
flex-wrap: nowrap;
margin:-10px 0 0 -10px;
}
.child {
display: inline-block;
margin:10px 0 0 10px;
flex-grow: 1;
height:150px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
</div>
</body>
Here is an example about flex, and breaking point that can set to let content wrap if need. You can inspire yourself from it and dig into flex here
The snippet below uses figure and figcaption, HTML tags dedicated to this kind of content, and flex and flex-wrap for the CSS part.
min or max-width can be used to enhance your styling and set some basic breaking points unless you want also or only use media queries.
.imgcpt {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
figure {
flex: 1 1 30%;
margin: 5px;
border: solid;
min-width: 300px;
text-align: center;
}
figure img {
width: 100%;
max-width: 800px;
}
figcaption>* {
margin: 0.25em
}
<div class="imgcpt">
<figure>
<img src="http://lorempixel.com/200/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/201/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/202/102/" alt="i show ..." />
<figcaption>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/203/103/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/204/104/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/205/105/" alt="i show ..." />
<figcaption>
<h1>Single title</h1>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/206/106/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
</div>
Run snippet in fullpage or play with it and edit it # http://codepen.io/gc-nomade/pen/dvoQyR
Not so much CSS has to be used when using flex.
I want to put the horizontal pictures along line and the names below
<div class="imgages">
<img src="rock.png"/><p>Rock</p>
<img src="paper.png"/><p>Paper</p>
<img src="scissors.png" /><p>Scissors</p>
</div>
TRY - DEMO [EDITED]
For horizontal align pictures use display: inline-block;:
TRY
div.images img {
display: inline-block;
}
Use HTML5 <figure> and <figcaption> Tags for get the names below:
Example:
<!-- Figure with figcaption -->
<figure>
<img src="https://i.stack.imgur.com/lYeVn.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption for the awesome picture</figcaption>
</figure>
Result:
NAME: Caption for the awesome picture
For more info:
Mozilla MDN - <figure>
FOR BOTH:
HTML:
<div class="images">
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
</div>
CSS:
.images figure {
display: inline-block;
}
Technique without the use of float.
Use display:inline-block to align the innnerdivs containing the image in a single line and add the image and text into the inner divs.
DEMO
I am trying to align several images that I have nested in a figure element side-by-side. I would like for each image to have its own, individual caption. However, when I add in the they stop aligning side-by-side. This is my current code;
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</figure>
Hope this can help, at least it works for me. I had the same problem in a bootstrap proyect and I've solved it using this code:
<ul class="list-unstyled list-inline text-center">
<li>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</li>
<li>
<img src="image1.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</li>
<li>
<img src="image3.jpg" alt= "image3" width="195" height="195">
<figcaption>image1</figcaption>
</li>
<li>
<img src="image1.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</li>
</ul>
The css for these classes in bootstrap.css is :
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.text-center {
text-align: center;
}
As already stated before, you should not/ must not use multiple figcaption tag inside a single figure.
You could bundle your images and their figcaption tags inside nested figure tags.
<figure>
<figcaption>Caption for the bundle of images</figcaption>
<figure>
<img src="picture1.jpg" alt="Description of picture 1">
<figcaption>Caption for Picture 1</figcaption>
</figure>
<figure>
<img src="picture2.jpg" alt="Description of picture 2">
<figcaption>Caption for Picture 2</figcaption>
</figure>
</figure>
You could do the following...
Do not include more than on figcaption in the figure. See http://html5doctor.com/the-figure-figcaption-elements/
Wrap the figures in divs and spans.
<div>
<span>
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</figure>
</span>
<span>
<figure>
<img src="image2.jpg" alt= "image1" width="195" height="195">
<figcaption>image2</figcaption>
</figure>
</span>
</div>
Then align it using css. See Align span next to each other
vertical-align:top;
You can play around with this here
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption
You shouldn't use more than one figcaption within figure
The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>).
see http://html5doctor.com/the-figure-figcaption-elements/
but if you insist on using multi figcaption per figure, you can do that by using css float:left
<figure>
<div style="float:left" >
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</div>
<div style="float:left" >
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</div>
<div style="float:left" >
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
</div>
<div style="float:left" >
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</div>
</figure>
http://jsfiddle.net/ZQLCq/1/
This doesn't answer your question, but... don't do that.
Only one element may be nested within a <figure>
You can have many images, but each figure should have a single caption.
Either use a single figcaption for the figure, or change your markup to this:
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</figure>
<figure>
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
</figure>
<figure>
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</figure>
If your images are displaying like zigzag in a row even after using the figure and figurecaption tags with css display:inline-block then do the following
<div class="container">
<figure>
<img src="image.jpg" width=150px; height=150px;>
<figcaption>image.jpg</figcaption>
</figure>
</div>
css:
.container{
display: flex
}