Advertisement
sexycullen

tags fixed height

Mar 28th, 2020
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.55 KB | None | 0 0
  1.  
  2.  
  3. /* CSS PART */
  4. .tags-container {
  5. width:540px;
  6. box-sizing:border-box;
  7. }
  8.  
  9. .tags-row {
  10. display:flex;
  11. align-items: baseline;
  12. justify-content: space-evenly;
  13. flex-wrap: wrap;
  14. padding: 4px;
  15.  
  16. }
  17.  
  18. /* MAIN TITLES */
  19. .title {
  20. padding: 2px;
  21. text-align:center;
  22. text-transform:uppercase;
  23. }
  24.  
  25.  
  26. /* EACH BOX TAGS */
  27. .tags {
  28. width:120px; /* change width and height for the size of each tag box */
  29. height:200px;
  30. margin:15px 5px;
  31. /* delete both overflow if you don't want scroll */
  32. overflow-y:scroll;
  33. overflow-x:hidden;
  34. }
  35.  
  36. .list-item {
  37. padding: 6px;
  38. }
  39.  
  40. .list-item ul {
  41. text-align:center;
  42. padding: 0;
  43. margin: 0;
  44. }
  45.  
  46. .list-item ul li {
  47. list-style:none;
  48. }
  49.  
  50. .list-item li {
  51. padding:2px 0;
  52. margin:5px 0;
  53. }
  54.  
  55.  
  56. /* GROUP TAGS 1 */
  57. .tags-item1 {
  58. border: 1px solid red;
  59. }
  60.  
  61. .title1 {
  62. color: white;
  63. background-color: red;
  64. }
  65.  
  66.  
  67. /* GROUP TAGS 2 */
  68. .tags-item2 {
  69. border: 1px solid yellow;
  70. }
  71.  
  72. .title2 {
  73. color: black;
  74. background-color: yellow;
  75. }
  76.  
  77. /* GROUP TAGS 3 */
  78. .tags-item3 {
  79. border: 1px solid blue;
  80. }
  81.  
  82. .title3 {
  83. color: white;
  84. background-color: blue;
  85. }
  86.  
  87.  
  88. /* GROUP TAGS 4 */
  89. .tags-item4 {
  90. border: 1px solid green;
  91. }
  92.  
  93. .title4 {
  94. color: white;
  95. background-color: green;
  96. }
  97.  
  98.  
  99. /* GROUP TAGS 5 */
  100. .tags-item5 {
  101. border: 1px solid purple;
  102. }
  103.  
  104. .title5 {
  105. color: white;
  106. background-color: purple;
  107. }
  108.  
  109.  
  110. /* GROUP TAGS 6 */
  111. .tags-item6 {
  112. border: 1px solid orange;
  113. }
  114.  
  115. .title6 {
  116. color: white;
  117. background-color: orange;
  118. }
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130. <!-- > HTML PART <-->
  131. <div class="tags-container">
  132. <div class="tags-row">
  133.  
  134. <!-- > GROUP TAGS 1 <-->
  135. <div class="tags tags-item1">
  136. <div class="title title1">
  137. group one
  138. </div>
  139. <div class="list-item">
  140. <ul>
  141. <li>tag</li>
  142. <li>tag</li>
  143. <li>tag</li>
  144. </ul>
  145. </div>
  146. </div>
  147.  
  148.  
  149. <!-- > GROUP TAGS 2 <-->
  150. <div class="tags tags-item2">
  151. <div class="title title2">
  152. group two
  153. </div>
  154. <div class="list-item">
  155. <ul>
  156. <li>tag</li>
  157. <li>tag</li>
  158. <li>tag</li>
  159. <li>tag</li>
  160. <li>tag</li>
  161. <li>tag</li>
  162. <li>tag</li>
  163. <li>tag</li>
  164. <li>tag</li>
  165. <li>tag</li>
  166. <li>tag</li>
  167. </ul>
  168. </div>
  169. </div>
  170.  
  171. <!-- > GROUP TAGS 3 <-->
  172. <div class="tags tags-item3">
  173. <div class="title title3">
  174. group three
  175. </div>
  176. <div class="list-item">
  177. <ul>
  178. <li>tag</li>
  179. <li>tag</li>
  180. <li>tag</li>
  181. </ul>
  182. </div>
  183. </div>
  184.  
  185. <!-- > GROUP TAGS 4 <-->
  186. <div class="tags tags-item4">
  187. <div class="title title4">
  188. group four
  189. </div>
  190. <div class="list-item">
  191. <ul>
  192. <li>tag</li>
  193. <li>tag</li>
  194. <li>tag</li>
  195. <li>tag</li>
  196. <li>tag</li>
  197. </ul>
  198. </div>
  199. </div>
  200.  
  201. <!-- > GROUP TAGS 5 <-->
  202. <div class="tags tags-item5">
  203. <div class="title title5">
  204. group five
  205. </div>
  206. <div class="list-item">
  207. <ul>
  208. <li>tag</li>
  209. <li>tag</li>
  210. <li>tag</li>
  211. <li>tag</li>
  212. <li>tag</li>
  213. </ul>
  214. </div>
  215. </div>
  216.  
  217. <!-- > GROUP TAGS 6 <-->
  218. <div class="tags tags-item6">
  219. <div class="title title6">
  220. group six
  221. </div>
  222. <div class="list-item">
  223. <ul>
  224. <li>tag</li>
  225. <li>tag</li>
  226. <li>tag</li>
  227. </ul>
  228. </div>
  229. </div>
  230.  
  231. </div> <!-- > don't delete/touch <-->
  232. </div> <!-- > don't delete/touch <-->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement