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

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ź

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 (253,340 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 ?

komentarz 30 maja 2022 przez VBService Ekspert (253,340 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;
}