It is necessary to make such a block http://prntscr.com/b5mg8m , the problem is how to implement the width of 6 blocks depending on the length of the text, so that the blocks are aligned across the entire width and it is desirable that there are no problems with adaptation
|
2 answers
http://caniuse.com - display: flex
* { padding: 0; margin: 0; box-sizing: border-box; } .block { display: -moz-flex; display: -ms-flex; display: -webkit-flex; display: flex; justify-content: space-between; } .block-item { text-align: center; border: 1px solid #ccc; padding: 10px 15px; } @media screen and (max-width: 500px) { .block { display: block; } } <div class="block"> <div class="block-item"> <h3>block-item</h3> </div> <div class="block-item"> <h3>block</h3> </div> <div class="block-item"> <h3>block</h3> </div> <div class="block-item"> <h3>block-item</h3> </div> <div class="block-item"> <h3>block</h3> </div> <div class="block-item"> <h3>block-item</h3> </div> </div> 
soledar10 soledar10
22.4k five 21 51
- for flex did not even think, thanks - Roman Fedorov
- bootstrap 4 on flex now works - Serge Esmanovich
- v4-alpha.getbootstrap.com/layout/grid/#mixins - float: left - soledar10
|
It is best to use a CSS / HTML framework, for example, Bootstrap It is adaptive, on the off site and on the Internet full of instructions :)
<div class="row"> <div class="span2">...1</div> <div class="span2">...2</div> <div class="span2">...3</div> <div class="span2">...4</div> <div class="span2">...5</div> <div class="span2">...6</div> </div> Good luck!
Alexander Khmelevskiy Alexander Khmelevskiy
31 2
- Not at all ... - Roman Fedorov
|