I have a simple problem, how I could set image and text in a single line. like this [image - text - image] and so on
<html>
<head>
<title></title>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<h1>afdsgdf dfgsdf dsfgf</h1>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</body>
</html><img> and <h1> are block elements by default. So they will display their content on their own line.
So you need to use the display property. And set its value to inline
<html>
<head>
<title></title>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
</head>
<body>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<h1>afdsgdf dfgsdf dsfgf</h1>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</body>
</html>
Read more about it here => https://developer.mozilla.org/en-US/docs/Web/CSS/display
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments