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: 308
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

[XML] pobierz, plaintext 
  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.  
[XML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 20.04.2024 - 05:06
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn