Kontener w CSS

pytanie zadane 28 września 2023 w HTML i CSS przez Jerzy Użytkownik (950 p.)

Stworzyłem na stronie dwa kontenery na jednym poziomie oraz kontener dla banera.

Przy zwiększaniu strony prawy kontener

spada niżej niż lewy .

Co zrobić aby dwa kontenery leżące obok siebie dostosowywały się do zmiany strony?

2	komentarz 28 września 2023 przez Comandeer Guru (608,860 p.) Bez kodu trudno jest cokolwiek powiedzieć.

3 odpowiedzi

odpowiedź 29 września 2023 przez darknode Użytkownik (560 p.)

<div id="container1"></div>
<div id="container2"></div>

body {
 margin: 0;
 padding: 0;
}


#container1 {
 height: 50vh;
 width: 100%;
 background-color: #111;
}
 
 
#container2 {
 height: 50vh;
 width: 100%;
 background-color: #888;
}

Pokaż swój kod, bo nie wiem jak u Ciebie to wygląda i co masz na myśli

komentarz 29 września 2023 przez VBService Ekspert (256,580 p.)

dwa kontenery leżące obok siebie

jesteś pewien Twojego przykładu?

komentarz 1 października 2023 przez darknode Użytkownik (560 p.)

Jestem pewien, różnie można interpretować wypowiedź autora wpisu, nie dał kodu więc nikt nie wie, o co dokładnie chodzi.

odpowiedź 1 października 2023 przez VBService Ekspert (256,580 p.)
edycja 1 października 2023 przez VBService

Nie podałeś kodu, trudno jest "odgadnąć" z czym dokładnie masz problem.

Przykład z flex.

wersja 1 [ kod on-line ]

<style>
  body {
    margin: 1rem;
  }
  .container {
    display: flex;
    width: 100%;
    height: 10dvh;
    gap: .25rem;
    box-sizing: border-box;
  }
  .container div {
    width: 100%;
    height: 100%;
    
    background-color: gray;
    color: white;
    padding: .5rem;
  }
  .container .baner {
    background-color: green;
  }
</style>

<div class="container">
  <div class="one">Lorem ipsum 1</div>
  <div class="two">Lorem ipsum 2</div>
  <div class="baner">Lorem ipsum baner</div>
</div>

wersja 2 [ kod on-line ]

<style>
  body {
    margin: 1rem;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 10dvh;
    gap: .25rem;
    box-sizing: border-box;
  }
  .container div {
    flex: 1;
    width: 100%;
    height: 100%;

    background-color: gray;
    color: white;
    padding: .5rem;
  }
  .container .baner {
    flex-basis: 100%;
    background-color: green;
  }
</style>

<div class="container">
  <div class="one">Lorem ipsum 1</div>
  <div class="two">Lorem ipsum 2</div>
  <div class="baner">Lorem ipsum baner</div>
</div>

Przykład z grid.

wersja 1 [ kod on-line ]

<style>
  body {
    margin: 1rem;
  }
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    width: 100%;
    height: 10dvh;
  }
  .container div {
    background-color: gray;
    color: white;
    padding: .5rem;
  }
  .container .baner {
    background-color: green;
  }
</style>

<div class="container">
  <div class="one">Lorem ipsum 1</div>
  <div class="two">Lorem ipsum 2</div>
  <div class="baner">Lorem ipsum baner</div>
</div>

wersja 2 [ kod on-line ]

<style>
  body {
    margin: 1rem;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 10dvh);
    gap: .25rem;
    width: 100%;
  }
  .container div {
    background-color: gray;
    color: white;
    padding: .5rem;
  }
  .container .baner {
    grid-column: span 2;
    background-color: green;
  }
</style>

<div class="container">
  <div class="one">Lorem ipsum 1</div>
  <div class="two">Lorem ipsum 2</div>
  <div class="baner">Lorem ipsum baner</div>
</div>

odpowiedź 1 października 2023 przez Visual Studio Kot Bywalec (2,550 p.)

Najprościej naj się tylko da

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twoja strona</title>
</head>
<body>
    <div class="container">
        <div class="banner-container">BANNER 1</div>
        <div class="banner-container">BANNER 2</div>
    </div>
</body>
</html>

Dalej stylizujesz

.container {
  width: 100%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-container {
  border: 5px solid blue;
  height: 50vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
}
@media only screen and (max-width: 1200px) {
  .container {
    display: block!important;
  }
}

@media only screen and (max-width: 1200px) -> tutaj określasz od jakiej szerokości div z bannerem 2 ma się zawinąć pod banner 1

W prawym górnym roku tego postu masz czarny button z napisem CODEPEN, kliknij i przetestuj czy o to Ci chodziło.

komentarz 2 października 2023 przez VBService Ekspert (256,580 p.)

@Visual Studio Kot; wszystko okay, ale ten font-size

.banner-container {
  /* ... */
  font-size: 2vw;
}

powyżej np. 1200px IMO za bardzo powiększa czcionkę i analogicznie np. mniej niż 420px pomniejsza, proponuje taką poprawkę

font-size: calc(1.5vw * .5rem);

lub

font-size: clamp(1rem, 1.5vw, 1.6rem);

1	komentarz 2 października 2023 przez Visual Studio Kot Bywalec (2,550 p.) Dzięki za info

komentarz 2 października 2023 przez VBService Ekspert (256,580 p.)

BTW, ten zapis powoduje, że gdy zachodzi warunek

@media only screen and (max-width: 1200px) {
  .container {
    display: block!important;
  }
}

.container traci flex-a w takiej sytuacji

proponuje np. takie rozwiązanie

[ pełny kod on-line ]

.banner-container {
  /* ... */
  flex-basis: 100%;
}
@media only screen and (max-width: 1200px) {
  .container {
    flex-wrap: wrap;
  }
}

BTW,

.container,
.banner-container {
  width: calc(100% - 10px); /* border-size * 2 = 10px */
  border: 5px solid red;
  display: flex;
}
.banner-container {
  border-color: blue;
  height: 50dvh;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  flex-basis: 100%;
}
@media only screen and (max-width: 1200px) {
  .container {
    flex-wrap: wrap;
  }
}