Jump to content
Sign in to follow this  
ladytf

style tag <figure>

Recommended Posts

hello,

 

i don't find a any topic about this, so i'm start this one.

 

i'm using a tag figure and the figcaption, but i have multiple imagens with a legend each one.

 

when i do this the images apears one after another in a second line and i like to do all in same line. what i need to change?

 

 

apologize my english i don't write very well, and what i know about code i learn alone

Share this post


Link to post
Share on other sites

The figure and figcaption elements are block level elements. They always occupy all the horizontal space available to them.

 

To fix that you can set the display property to inline or inline-block. Another solution is to set float to left or right.

Share this post


Link to post
Share on other sites

Using the image and text from this example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
*{
margin:0;
padding:0;
}
figure{
display:inline-block;
margin:10px;
}
</style>
</head>

<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

<p><strong>Note:</strong> The figure tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...