<!doctype html>
<html class="no-js" lang="">
<head>
<style>
#container {
display: flex;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: -o-flex;
flex-flow: row wrap;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
-o-flex-flow: row wrap;
justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
}
#container > div {
width: 160px;
height: 160px;
text-align: center;
background-color: rgba(56, 77, 158, 0.8);
}
</style>
</head>
<body>
<div id="container">
<div>Box One</div>
<div>Box Two</div>
<div>Box Three</div>
</div>
</body>
</html>
Using the Flexbox approach this displays three blue boxes with even space between them.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.