Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Blokada DIVów
david8213
post
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

Zrobiłem kalendarz z komentarzami w CSS. Na tel jest ok. Jak zablokować przesuwanie się DIVów wraz ze zmniejszaniem rozmiarów okna przeglądarki.
Na stronie ma być zawsze 7 kolumn w rzędzie i nie mają przeskakiwać na dół jak zmieniam rozmiar okna w windows...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.  
  6. .ramka {
  7.   position: relative;
  8.   width:90%;
  9. }
  10.  
  11. .dropdown {
  12.   position: relative;
  13.   display: inline-block;
  14.   color:blue;
  15.   background-color: #acc;
  16.   padding:  15px;
  17.   border: 2px solid white; 
  18.   margin-bottom: 4px;
  19.  // max-width: 150px;
  20.   width: 100px;
  21. }
  22.  
  23. .days {
  24.   position: relative;
  25.   display: inline-block;
  26.   color:white;
  27.   background-color: green;
  28.   padding:  15px;
  29.   border: 2px solid white; 
  30.   margin-bottom: 4px;
  31.  // max-width: 150px;
  32.   width: 100px;
  33. }
  34.  
  35. .dropdown-content {
  36.   display: none;
  37.   position: absolute;
  38.   background-color: #f9f9f9;
  39.   min-width: 160px;
  40.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  41.   padding: 10px 16px;
  42.   z-index: 1;
  43.     margin-top: -1.8em;
  44.     margin-left: 1.5em;
  45. }
  46.  
  47. .dropdown:hover .dropdown-content {
  48.   display: block;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53.  
  54.  
  55. <center>
  56. <br><br><br><br>
  57.  
  58. <div class="days">
  59.   <span>Pn</span>
  60. </div>
  61.  
  62. <div class="days">
  63.   <span>Wt</span>
  64. </div>
  65.  
  66. <div class="days">
  67.   <span>Sr</span>
  68. </div>
  69.  
  70. <div class="days">
  71.   <span>Cz</span>
  72. </div>
  73.  
  74. <div class="days">
  75.   <span>Pt</span>
  76. </div>
  77.  
  78. <div class="days">
  79.   <span>So</span>
  80. </div>
  81.  
  82. <div class="days">
  83.   <span>Nd</span>
  84. </div>
  85.  
  86. <br>
  87.  
  88. <div class="dropdown">
  89.   <span> &nbsp; </span>
  90. </div>
  91.  
  92.  
  93. <div class="dropdown">
  94.   <span>1</span>
  95.   <div class="dropdown-content">
  96.    1
  97.   </div>
  98. </div>
  99.  
  100.  
  101. <div class="dropdown">
  102.   <span>2</span>
  103.   <div class="dropdown-content">
  104.    2
  105.   </div>
  106. </div>
  107.  
  108. <div class="dropdown">
  109.   <span>3</span>
  110.   <div class="dropdown-content">
  111.    3
  112.   </div>
  113. </div>
  114.  
  115. <div class="dropdown">
  116.   <span>4</span>
  117.   <div class="dropdown-content">
  118.    4
  119.   </div>
  120. </div>
  121.  
  122. <div class="dropdown">
  123.   <span>5</span>
  124.   <div class="dropdown-content">
  125.    5
  126.   </div>
  127. </div>
  128.  
  129. <div class="dropdown">
  130.   <span>6</span>
  131.   <div class="dropdown-content">
  132.    6
  133.   </div>
  134. </div>
  135.  
  136. <br>
  137.  
  138. <div class="dropdown">
  139.   <span>7</span>
  140.   <div class="dropdown-content">
  141.    7
  142.   </div>
  143. </div>
  144.  
  145. <div class="dropdown">
  146.   <span>8</span>
  147.   <div class="dropdown-content">
  148.    8
  149.   </div>
  150. </div>
  151.  
  152. <div class="dropdown">
  153.   <span>9</span>
  154.   <div class="dropdown-content">
  155.    9
  156.   </div>
  157. </div>
  158.  
  159. <div class="dropdown">
  160.   <span>10</span>
  161.   <div class="dropdown-content">
  162.    10
  163.   </div>
  164. </div>
  165.  
  166. <div class="dropdown">
  167.   <span>11</span>
  168.   <div class="dropdown-content">
  169.    11
  170.   </div>
  171. </div>
  172.  
  173. <div class="dropdown">
  174.   <span>12</span>
  175.   <div class="dropdown-content">
  176.    12
  177.   </div>
  178. </div>
  179.  
  180. <div class="dropdown">
  181.   <span>13</span>
  182.   <div class="dropdown-content">
  183.    13
  184.   </div>
  185. </div>
  186.  
  187. <br>
  188.  
  189. <div class="dropdown">
  190.   <span>14</span>
  191.   <div class="dropdown-content">
  192.    14
  193.   </div>
  194. </div>
  195.  
  196. <div class="dropdown">
  197.   <span>15</span>
  198.   <div class="dropdown-content">
  199.    15
  200.   </div>
  201. </div>
  202.  
  203. <div class="dropdown">
  204.   <span>16</span>
  205.   <div class="dropdown-content">
  206.    16
  207.   </div>
  208. </div>
  209.  
  210. <div class="dropdown">
  211.   <span>17</span>
  212.   <div class="dropdown-content">
  213.    17
  214.   </div>
  215. </div>
  216.  
  217. <div class="dropdown">
  218.   <span>18</span>
  219.   <div class="dropdown-content">
  220.    18
  221.   </div>
  222. </div>
  223.  
  224. <div class="dropdown">
  225.   <span>19</span>
  226.   <div class="dropdown-content">
  227.    19
  228.   </div>
  229. </div>
  230.  
  231. <div class="dropdown">
  232.   <span>20</span>
  233.   <div class="dropdown-content">
  234.    20
  235.   </div>
  236. </div>
  237.  
  238. <br>
  239.  
  240. <div class="dropdown">
  241.   <span>21</span>
  242.   <div class="dropdown-content">
  243.    21
  244.   </div>
  245. </div>
  246.  
  247. <div class="dropdown">
  248.   <span>22</span>
  249.   <div class="dropdown-content">
  250.    22
  251.   </div>
  252. </div>
  253.  
  254. <div class="dropdown">
  255.   <span>23</span>
  256.   <div class="dropdown-content">
  257.    23
  258.   </div>
  259. </div>
  260.  
  261. <div class="dropdown">
  262.   <span>24</span>
  263.   <div class="dropdown-content">
  264.    24
  265.   </div>
  266. </div>
  267.  
  268. <div class="dropdown">
  269.   <span>25</span>
  270.   <div class="dropdown-content">
  271.    25
  272.   </div>
  273. </div>
  274.  
  275. <div class="dropdown">
  276.   <span>26</span>
  277.   <div class="dropdown-content">
  278.    26
  279.   </div>
  280. </div>
  281.  
  282. <div class="dropdown">
  283.   <span>27</span>
  284.   <div class="dropdown-content">
  285.    27
  286.   </div>
  287. </div>
  288.  
  289. <br>
  290.  
  291. <div class="dropdown">
  292.   <span>28</span>
  293.   <div class="dropdown-content">
  294.    28
  295.   </div>
  296. </div>
  297.  
  298. <div class="dropdown">
  299.   <span>29</span>
  300.   <div class="dropdown-content">
  301.    29
  302.   </div>
  303. </div>
  304.  
  305. <div class="dropdown">
  306.   <span>30</span>
  307.   <div class="dropdown-content">
  308.    30
  309.   </div>
  310. </div>
  311.  
  312. <div class="dropdown">
  313.   <span> &nbsp; </span>
  314. </div>
  315.  
  316. <div class="dropdown">
  317.   <span> &nbsp; </span>
  318. </div>
  319.  
  320. <div class="dropdown">
  321.   <span> &nbsp; </span>
  322. </div>
  323.  
  324. <div class="dropdown">
  325.   <span> &nbsp; </span>
  326. </div>
  327.  
  328.  
  329.  
  330.  
  331.  
  332. </body>
  333. </html>
[HTML] pobierz, plaintext


Ten post edytował david8213 4.10.2019, 12:01:52
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Neutral
post
Post #2





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----

Kod
.tile1, .tile2 {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.tile1 .sub_tile {
  background: lightgreen;
}

.tile2 .sub_tile {
  background: orange;
}

.sub_tile {
  display: flex;
  min-width: 50px;
  height: 50px;
}

.child {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}


[HTML] pobierz, plaintext 
  1. <body style="background: darkgoldenrod;">
  2.  
  3.  
  4. <div id="caldendar">
  5.  
  6.   <div class="tile1">
  7.  
  8.     <div class="sub_tile"><div class="child">1</div></div>
  9.     <div class="sub_tile"><div class="child">1</div></div>
  10.     <div class="sub_tile"><div class="child">1</div></div>
  11.     <div class="sub_tile"><div class="child">1</div></div>
  12.     <div class="sub_tile"><div class="child">1</div></div>
  13.     <div class="sub_tile"><div class="child">1</div></div>
  14.     <div class="sub_tile"><div class="child">1</div></div>
  15.     <div class="sub_tile"><div class="child">1</div></div>
  16.     <div class="sub_tile"><div class="child">1</div></div>
  17.     <div class="sub_tile"><div class="child">1</div></div>
  18.     <div class="sub_tile"><div class="child">1</div></div>
  19.     <div class="sub_tile"><div class="child">1</div></div>
  20.     <div class="sub_tile"><div class="child">1</div></div>
  21.  
  22.  
  23.   </div>
  24.  
  25.   <div class="tile2">
  26.  
  27.     <div class="sub_tile"><div class="child">1</div></div>
  28.     <div class="sub_tile"><div class="child">1</div></div>
  29.     <div class="sub_tile"><div class="child">1</div></div>
  30.     <div class="sub_tile"><div class="child">1</div></div>
  31.     <div class="sub_tile"><div class="child">1</div></div>
  32.     <div class="sub_tile"><div class="child">1</div></div>
  33.     <div class="sub_tile"><div class="child">1</div></div>
  34.     <div class="sub_tile"><div class="child">1</div></div>
  35.     <div class="sub_tile"><div class="child">1</div></div>
  36.     <div class="sub_tile"><div class="child">1</div></div>
  37.     <div class="sub_tile"><div class="child">1</div></div>
  38.     <div class="sub_tile"><div class="child">1</div></div>
  39.     <div class="sub_tile"><div class="child">1</div></div>
  40.  
  41.   </div>
  42.  
  43. </div>
  44.  
  45. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- david8213   [CSS]Blokada DIVów   4.10.2019, 12:01:08
- - Neutral   Kod.tile1, .tile2 { display: flex; justify...   4.10.2019, 13:20:46
- - dublinka   Zawsze mozesz to zrobic na tabeli i ustalic szer k...   4.10.2019, 14:00:20
- - emillo91   Procentowe wartości to dobre rozwiązanie. Możesz j...   5.10.2019, 22:35:38
- - david8213   Zrobiłem jak poniżej ale wiersz z nazwą miesiąca p...   13.10.2019, 15:02:58

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 13.10.2025 - 08:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn