Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][PHP]Rozmiar tekstu w zaleznosci od rozmiaru okna przeglądarki
david8213
post 25.03.2020, 00:10:11
Post #1





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

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


Jak zrobić jak na stronie poniżej

dwa divy obok siebie. po lewej tekst a po prawej zdjęcie
Jak zmniejszam okno przeglądarki to divy się pomniejszają a jak zwiększam okno przeglądarki to tekst i obraz się powiększa
Musi jeszcze działać przeskakiwanie kolumn jedną pod drugą jak juz osiągnie zbyt mały rozmiar
https://www.szymonolma.pl/fotoblog/

Zrobiłem jak poniżej ale nie do końca działa

  1.  
  2. <html>
  3.  
  4. <head>
  5.  
  6.  
  7.  
  8. <style>
  9.  
  10.  
  11. .flex-container {
  12. width: 85%;
  13.  
  14.  
  15. background-color: gray;
  16.  
  17.  
  18. padding: 10px;
  19.  
  20.  
  21. display: flex;
  22.  
  23.  
  24. justify-content: center;
  25.  
  26.  
  27. align-content: center;
  28.  
  29.  
  30. margin-left: auto;
  31. margin-right: auto;
  32.  
  33. //flex-basis: auto;
  34.  
  35.  
  36. //flex-wrap: wrap;
  37. }
  38.  
  39.  
  40.  
  41. .flex-item1 {
  42.  
  43.  
  44. background-color: red;
  45.  
  46.  
  47. border: 1px black solid;
  48.  
  49. flex-basis: 85%;
  50.  
  51. //flex-grow: 1;
  52.  
  53. text-align: center;
  54. }
  55.  
  56.  
  57.  
  58.  
  59. .flex-item2 {
  60.  
  61.  
  62.  
  63. background-color: yellow;
  64.  
  65. border: 1px black solid;
  66.  
  67.  
  68. flex-basis: 40%;
  69.  
  70.  
  71. }
  72.  
  73.  
  74.  
  75. .flex-container {
  76. flex-direction: column;
  77. }
  78. @media (min-width: 800px) {
  79. .flex-container {
  80. flex-direction: row;
  81. }
  82. }
  83.  
  84.  
  85. @media (min-height: 1079px) {
  86. .flex-container {
  87. flex-wrap: wrap;
  88. }
  89. }
  90.  
  91. </style>
  92.  
  93.  
  94. </head>
  95.  
  96.  
  97. <body>
  98.  
  99.  
  100.  
  101. <br>
  102.  
  103.  
  104. <div class="flex-container">
  105.  
  106.  
  107.  
  108. <div class="flex-item1" style="min-width: 200px">
  109. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  110. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  111. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  112. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  113. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  114. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
  115. </div>
  116.  
  117.  
  118.  
  119. <div class="flex-item1" style=" flex-basis:auto; min-width: 200px; flex-basis: 50%;">
  120.  
  121.  
  122. <img width="80%" src="https://cdn.pixabay.com/photo/2017/01/06/19/12/soap-bubble-1958648_960_720.jpg" border="0" style="margin:0 auto; display:block; padding: 5px 5px 5px 5px;">
  123.  
  124.  
  125. </div>
  126.  
  127.  
  128. </div>
  129.  
  130.  
  131. <!----contener end-----> 
  132.  
  133.  
  134.  
  135. </body>
  136.  
  137. </html>
  138.  
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 5.04.2020 - 01:51