jak przesunąć przycisk przy zmniejszeniu rozmiaru przeglądarki

0

Mam dwa duże przyciski obok siebie.
Jeśli zmniejszę rozmiar przeglądarki to przyciski nie mieszą się w oknie,.
Czy zamiast zmniejszać rozmiar, czy jest możliwe żeby w przypadku, gdy jest za mało miejsca jeden przycisk przesunąć w inne miejsce (np pod przycisk pierwszy a tym samym trzeba przesunąć niżej wszystko pozostałe)

kombinuję w ten sposób:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Two Column Layout</title> 
  
    <style> 
        .body { 
            padding: 0; 
            margin: 0; 
        } 
  
        .Parent { 
            display: flex; 
            flex-wrap:wrap;
            flex-direction: row; 
        } 
  
        .child1 { 
            width: 400px; 
            height: 300px; 
            background-color: green; 
            text-align: right; 
            color: white; 
        } 
  
        .child2 { 
            width: 400px; 
            color: green; 
            height: 300px; 
            background-color: blue; 
        } 
        
      }

      .inactive-button {
        position: absolute;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        font-family: Arial, Sans-Serif, Verdana;
        background-color: #fcfcfc;
        color: #3E494F;
        border: 1px solid #92B4E7;
        border-radius: 5px;
        width: 300px;
      }
        
        
        
    </style> 
</head> 
  
<body> 
    <div class="Parent"> 
        <div class="child1">
                <input class="inactive-button" style="left:10px; top:20px; font-size: 180%;" type="submit" name="Zdarzenie" value="WEJSCIE1" id="lblWe"> 
        </div> 
        <div class="child2"> 
             <input class="inactive-button" style="left:10px; top:20px; font-size: 180%;" type="submit" name="Zdarzenie" value="WYJSCIE1" id="lblWe"> 
        </div> 
        <div class="child1"> 
             <input class="inactive-button" style="left:10px; top:20px; font-size: 180%;" type="submit" name="Zdarzenie" value="WEJSCIE2" id="lblWe">
        </div> 
        <div class="child2"> 
             <input class="inactive-button" style="left:10px; top:20px; font-size: 180%;" type="submit" name="Zdarzenie" value="WEJSCIE2" id="lblWe">
        </div> 
    </div> 
</body> 
  
</html>

Ale te przyciski się pokrywają.
Wszystkie mają wpisane takie same położenie, ale skoro każdy leży na innym DIVie, to czy położenie nie powinno odnosić się do danego DIVa?
Mógłby mi to ktoś wytłumaczyć?

I drugie problem.
Chciałbym aby zawsze były dwa przyciski obok siebie (jeśli zmniejszę rozmiar okna to wtedy się układają jedne pod drugim) Ale jeśli jest szerokie okno, to wtedy już mam trzy przyciski w rzędzie. Jak temu zapobiec?

0
My Razem napisał(a):

Mam dwa duże przyciski obok siebie.
Jeśli zmniejszę rozmiar przeglądarki to przyciski nie mieszą się w oknie,.
Czy zamiast zmniejszać rozmiar, czy jest możliwe żeby w przypadku, gdy jest za mało miejsca jeden przycisk przesunąć w inne miejsce (np pod przycisk pierwszy a tym samym trzeba przesunąć niżej wszystko pozostałe)

Da się to zrobić na kilka sposobów:

  • Albo tak ułożyć elementy w systemie pudełkowym żeby "same przeskoczyły" tam gdzie mają być
  • Albo zbudować responsywną stronę używać media queries, tak żeby zmienić styl elementu dla różnych rozmiarów okna
  • Albo skorzystać z dosyć nowego "container queries", ale one mogą nie być wspierane przez każdą przeglądarkę.
0

już jestem blisko osiągnięcia tego co chciałem
ale zostało mi jeszcze wycentrowane tych przycisków


<!DOCTYPE html>
<html>

<HEAD>

<style type="text/css">


      .active-button {
         position: relative;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        font-family: Arial, Sans-Serif, Verdana;
        background-color: #0078D7;
        color: #fcfcfc;
        border: 1px solid #0078D7;
        border-radius: 5px;
        width: 300px;
      }


.container {
	 position: relative;
	 display: flex;
	 flex-flow: wrap;
     justify-content: center; /* wysrodkowuje elementy w poziomie */
     align-items: center;     /* wysrodkowuje elementy w pionie */
}
 .item {
 		box-sizing: border-box;
        padding: 30px;
        flex: 1;
       }
 @media screen and (max-width: 9999px) 
 	   {
       	.item {
        		flex-basis: 50%;
              }
       }
 @media screen and (max-width: 500px)
 	   {
 		.item {
        	    flex-basis: 100%;
              }
       }
</style> 

<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</HEAD>

<body>

<div class="container">
	 <div class="item">
        <input class="active-button" style="height:120px; font-size: 180%;" type="submit" name="Zdarzenie" value="1" id="lblWe"><br><br> 
        <input class="active-button" style="height:120px; font-size: 180%;" type="submit" name="Zdarzenie" value="2" id="lblWy">
     </div>
     
     <div class="item">
	     <input class="active-button" style="height:50px; font-size: 180%;" type="submit" name="Zdarzenie" value="4" id="lblWy"><br><br>
	     <input class="active-button" style="height:50px; font-size: 180%;" type="submit" name="Zdarzenie" value="5" id="lblWy"><br><br>
	     <input class="active-button" style="height:50px; font-size: 180%;" type="submit" name="Zdarzenie" value="6" id="lblWy"><br><br>
	     <input class="active-button" style="height:50px; font-size: 180%;" type="submit" name="Zdarzenie" value="7" id="lblWy">
     </div>
	 <div class="item">
	 <input class="active-button" style="height:120px; font-size: 180%;" type="submit" name="Zdarzenie" value="3" id="lblWy">
     </div>
      <div class="item">
	 <input class="active-button" style="height:120px; font-size: 180%;" type="submit" name="Zdarzenie" value="8" id="lblWy">
     </div>
</div>

</body>
</html>

przyciski mam w dwóch kolumnach.
I teraz jak te po lewej stronie (czyli 1,2,3) przesunąć w prawo do środka, natomiast te które są po prawej stronie (4,5,6,7,8) przesunąć w lewo do środka
Oczywiście po ściśnięciu przeglądarki nadal muszą się ustawiać równo jeden pod drugim.
Jak uruchomicie ten kod to na pewno zrozumiecie o co chodzi

1 użytkowników online, w tym zalogowanych: 0, gości: 1