Did you see that? Your <div>s all moved onto the same line! You can already start to see how this type of positioning can be useful for navigation bars like the one at the top of the main Codecademy page (where you can click "Learn," "Teach," and so on).
The inline-block value allows you to put several block elements on the same line. Theinline value places all your elements next to one another, but not as blocks: they don't keep their dimensions.
Instructions
Try it and see! Set all your
<div>s to have adisplay value of inline.
* {
border: 1px dashed blue;
}
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:inline;
}
#one {
background-color: #FF0000;
}
#two {
background-color: #0000FF;
}
#three {
background-color: #FFD700;
}
#four {
background-color: #308014;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body>
</html>
No comments:
Post a Comment