• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

DIVy zmieniajace wspólnie wysokosc względem ilości tekstu

VPS Starter Arubacloud
0 głosów
214 wizyt
pytanie zadane 29 maja 2022 w HTML i CSS przez itclouder Nowicjusz (160 p.)
edycja 29 maja 2022 przez itclouder

Czy to w ogóle wykonalne? Z tabelkami było to prostsze. A obecnie tworzę stronę i chcę by wyglądała tak samo na dowolnej rozdzielczości ale nie wychodzi mi to. Jak daje stałą wysokość kolumn ale w jednostkach 'viewport' wielkosc divow, ich wysokosc fajnie sie zmienia dynamicznie. Ale gdy w tych divach mam tekst w px, to przy wiekszych monitorach jest duzo wolnego miejsca pod tekstem. Gdy tekst daje jako zmieniajacy wielkosc dynamicznie w jednostce vw np. to sa sytuacje, ze tekst "chowa sie" w divie, jest go wiecej niz wysokosc diva.

To na czym mi zależy zobrazowałem niżej.

<html>
<head>

<style type="text/css">

#rodzic {

    height:auto;
    

}

#d1 {
    float:left;
    background-color:red;
    width:20vw;
    height:6vw;
}

#d2 {
    float:left;
    background-color:green;
    width:20vw;
    height:6vw;
}

#d3 {
    float:left;
    background-color:yellow;
    width:20vw;
    height:6vw;
}


</style>

</head>
<body>

<div id="rodzic">

    <div id="d1">
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div>
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
 
    </div>

    <div id="d2">
       drugi div
    </div>
        
    <div id="d3">
       trzeci div
    </div>

</div>

 

1 odpowiedź

+2 głosów
odpowiedź 29 maja 2022 przez niezalogowany

Że tak? Display flex ftw

komentarz 29 maja 2022 przez itclouder Nowicjusz (160 p.)
hmm musze o tym poczytac: display:flex - a dalbys rade ten moj kod dostosowac do tego, aby dzialalo to tak, jak opisalem?
komentarz 29 maja 2022 przez niezalogowany
Raczej spójrz na flexa. Właśnie do takich rzeczy został stworzony.
komentarz 29 maja 2022 przez itclouder Nowicjusz (160 p.)
<html>
<head>
<style type="text/css">

#rodzic {
    display:flex;
}

#d1 {
    background-color:red;
    width:20vw;

}

#d2 {
    background-color:green;
    width:20vw;


}

#d3 {
    background-color:yellow;
    width:20vw;

}



</style>

</head>
<body>

<div id="rodzic">

    <div id="d1">
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div>
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
        <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 
        
                <div>jakis sobie tekst i jest go na tyle duzo ze         
        wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
        </div> 

 
    </div>

    <div id="d2">
       drugi div
    </div>
    
    
    <div id="d3">
       trzeci div
    </div>
</div>

</body>
</html>

ok, juz wiem o co chodzi mniej wiecej. Musze jednak przemyslec jak ma strona wygladac, bo moja srodkowa kolumna to obrazek, obrazek ktory ma stala wysokosc. I tekst moge dopasowac po lewej i po prawej (div 1    i   div 3)  na danym monitorze, danej rozdzielczosci. Ale problem pojawia sie np na wiekszej rozdzielczosci, gdzie obrazek z div 2 jest o tej samej wysokosci, a tekst np (font size) sie dostosowuje dynamicznie i jako ze jest wiekszy na wiekszym monitorze, to jest go wiecej i wypycha div 1    i    div 3   bardziej w dol, maja wieksza wysokosc niz ten div srodkowy.

komentarz 29 maja 2022 przez VBService Ekspert (251,210 p.)

@itclouder, 

#rodzic {
 display: flex; 
}
[id^="d"] { /* dla elementów z atrybutem id, którego nazwa zaczyna się na literę d */
  padding: 1em;
  width: 20vw;
}
 
#d1 {
    background-color: red;    
}
 
#d2 {
    background-color: green;
}
 
#d3 {
    background-color: yellow;
}
#rodzic {
 display: flex; 
}
[id^="d"] { /* dla elementów z atrybutem id, którego nazwa zaczyna się na literę d */
  padding: 1em;
  width: 33.33%; /* dla 3 kolumn */
}
 
#d1 {
    background-color: red;    
}
 
#d2 {
    background-color: green;
}
 
#d3 {
    background-color: yellow;
}

 

1
komentarz 29 maja 2022 przez niezalogowany

@itclouder bez przesady - klas się używa do tego :P

@itclouder na wyższych rozdzielczościach możesz dać font-size w pikselach. A jeszcze lepiej - poczytaj o clamp

komentarz 30 maja 2022 przez itclouder Nowicjusz (160 p.)
tzn. co bez przesady? Da się to zrobić że mam trzy kolumny, dwie - pierwsza i trzeci rozrastają się w dół względem ilosci tekstu, a druga gdzie jest tylko obrazek (jako tło) automatycznie się dostosowuje do dwóch pozostałych (tam gdzie tekst) i ten obrazek w tle się skaluje  ?
1
komentarz 30 maja 2022 przez VBService Ekspert (251,210 p.)
edycja 30 maja 2022 przez VBService

tzn. co bez przesady? 

pewnie chodzi o to, że za dużo używasz id do stylowania elementów, zamiast klas.

CSS ID vs Class

 

mam trzy kolumny, dwie - pierwsza i trzeci rozrastają się w dół względem ilosci tekstu, a druga gdzie jest tylko obrazek (jako tło) 

np.

<div class="rodzic">
  <div class="kolumna tekst--lewa">
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div>
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div> 
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div> 
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div>
  </div>

  <div class="kolumna obrazek"></div>     

  <div class="kolumna tekst--prawa">
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div>
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div> 
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div> 
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div> 
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div>
    <div>jakis sobie tekst i jest go na tyle duzo ze         
      wyjezdza poza wysokosc diva a nie rozciaga go i przy okazji te dwa pozostale divy lorem ipsum  lorem ipsum lorem ipsum
    </div>
  </div>
</div>
.rodzic {
  display: flex; 
}
.kolumna {
  padding: 1em;
  width: 33.33%; /* dla 3 kolumn lub calc(100% / 3) */
  font-size: clamp(14px, 0.5vw + 14px, 20px);
}
.tekst--lewa {
  background-color: red;    
}
.obrazek {
  background-color: green;
  background-image: url(https://picsum.photos/1000/800/?random=1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.tekst--prawa {
  background-color: yellow;
}

 

1
komentarz 30 maja 2022 przez itclouder Nowicjusz (160 p.)
Jeny, kolego, jak Ty to zrobiles! Dzięki, o to mi wlasnie chodzilo, DOKLADNIE O TO!!!

Podobne pytania

0 głosów
0 odpowiedzi 401 wizyt
pytanie zadane 30 listopada 2020 w HTML i CSS przez Michał Galericz Początkujący (400 p.)
0 głosów
2 odpowiedzi 570 wizyt
pytanie zadane 27 sierpnia 2017 w HTML i CSS przez Hawaner Użytkownik (630 p.)
0 głosów
1 odpowiedź 911 wizyt
pytanie zadane 22 maja 2017 w HTML i CSS przez fibz Nowicjusz (150 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...