image layout:
i trying make flexible layout flexbox , came this. have no idea how make possible without position: absolute. possible
.container { display: flex; flex-flow: row wrap; } .container > * { padding: 10px; flex: 1 100%; color: white; } .content { order: 1; background: green; } .ads { order: 2; background: blue; } .comments { order: 3; background: red; } @media , (min-width: 940px) { .content, .comments{ flex: 0 1 80%; margin-right: 10px; } .ads { flex: 1 0 auto; order: 2; } }<html> <head> <title>flex</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="content"> lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam enim nisl, accumsan quis nisi sed, tempor dapibus libero. aliquam condimentum consectetur mauris, vel eleifend est venenatis sit amet. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. proin in felis @ quam bibendum bibendum non sed tellus. nulla efficitur tincidunt elementum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. suspendisse euismod justo dui, non mollis nisl vulputate ut. suspendisse vehicula sagittis orci, eget accumsan tortor pretium non. sed finibus facilisis tortor @ elementum. curabitur tincidunt molestie ipsum vel iaculis. etiam ornare elit nec arcu facilisis, vel tempus ante facilisis. pellentesque non libero ante. nullam justo arcu, sollicitudin id malesuada ac, ultricies ac dolor. nulla nunc felis, dignissim vel iaculis id, ultrices nec sem. nulla fringilla lacus vitae metus porta tincidunt id sapien. suspendisse mollis metus non dolor consequat pellentesque. donec rutrum odio ac sapien efficitur, @ efficitur nisl dictum. maecenas vitae arcu eget enim viverra eleifend. mauris @ dolor placerat, varius ante quis, consequat elit. sed sodales congue bibendum. morbi convallis eros vel nulla sagittis eleifend vel in lacus. etiam imperdiet lorem eu turpis rutrum venenatis. </div> <div class="comments"> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </div> <div class="ads"> <img src="http://demo.joomshaper.com/2012/neo/images/stories/demo/vertical-banner.jpg" /> </div> </div> </body> </html>
you don't need use flexbox this, can use floating techniques.
- have
.adscontainer come after main content in markup, since makes sense semantically (you want ads follow content on mobile devices) - have main content float left , ads float right on big screens, giving each percentage of width take up:
body{ margin: 0; } .container{ overflow: hidden; /* 1 way of clearing our floated elements */ } .content{ background-color: #349900; } .ads{ background-color: #0166fe; } .comments{ background-color: #fe0000; } @media screen , (min-width: 940px){ .content{ float: left; width: 70%; } .ads{ float: right; width: 30%; } }<div class="container"> <div class="content">lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam enim nisl, accumsan quis nisi sed, tempor dapibus libero. aliquam condimentum consectetur mauris, vel eleifend est venenatis sit amet. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. proin in felis @ quam bibendum bibendum non sed tellus. nulla efficitur tincidunt elementum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. suspendisse euismod justo dui, non mollis nisl vulputate ut. suspendisse vehicula sagittis orci, eget accumsan tortor pretium non. sed finibus facilisis tortor @ elementum. curabitur tincidunt molestie ipsum vel iaculis. etiam ornare elit nec arcu facilisis, vel tempus ante facilisis. pellentesque non libero ante. nullam justo arcu, sollicitudin id malesuada ac, ultricies ac dolor. nulla nunc felis, dignissim vel iaculis id, ultrices nec sem. nulla fringilla lacus vitae metus porta tincidunt id sapien. suspendisse mollis metus non dolor consequat pellentesque. donec rutrum odio ac sapien efficitur, @ efficitur nisl dictum. maecenas vitae arcu eget enim viverra eleifend. mauris @ dolor placerat, varius ante quis, consequat elit. sed sodales congue bibendum. morbi convallis eros vel nulla sagittis eleifend vel in lacus. etiam imperdiet lorem eu turpis rutrum venenatis.</div> <div class="ads"> <img src="http://demo.joomshaper.com/2012/neo/images/stories/demo/vertical-banner.jpg" /> </div> <div class="comments">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</div> </div>
Comments
Post a Comment