Jump to content

style tag <figure>


ladytf

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

Link to comment
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.

Link to comment
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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...