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

dopasowywanie div względem siebie

VPS Starter Arubacloud
0 głosów
222 wizyt
pytanie zadane 18 czerwca 2018 w HTML i CSS przez xxx1990 Początkujący (490 p.)

Witam piszę prostą stronkę internetową . Niestety nie mogę rozwiązać problemu. Chcę żeby dwa divy (leftPanel, rightPanel) będące obok siebie , zawsze dostosowywały swoją wysokość względem siebie.  Używalem display:table  oraz hidden overflow noi bez efektu ( w 2 przypadku zjada mi stopkę ). Proszę o pomoc !

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display:block;
}

body {
  line-height:1;
}

ul, ol {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}


body{
    
   background-color: #EDDCC7; 
}

#calosc
{
    
    width:70%;
    margin-left:auto;
    margin-right:auto;
    
    overflow:hidden;
}

#header
{
height:30%;
background-color: black;

}

#foto{
   
    height:350px;;
    width:100%;
}


.zdjeciePensjonatu{
    width:250px;
    height:250px;
    
    
    
}
#middle{
    
   
    height: 60%;
    
}


#topmenu
{
    padding:10px; 
    height:40px;
    width:100%;
    background-color:#82272B;
}

#menu{
    position:sticky;
    
    
}

#srodek{
    
   
    height:40px;
    text-align:center;
}

ol{
    padding:0;
    margin:0;
    font-size:18px;
    height:35px;
    line-height:200%;
    list-style-type: none;
    display:inline-block;
    
}

ol a{
    
   display:block;
   text-decoration: none;
   color:white;
   
    
}

ol > li{
    
    float:left;
    width:20%;
    height:40px;
    width:150px;
    border: 1px white solid;
   border-radius:50%;
    
}



ol > li:hover > a{
    color: black;
    border:1px solid white;
    border-radius: 50%;
    background-color: #EFECE1;
}




#leftPanel{
    background-color:#EFECE1 ;
    width:65%;
    padding:20px;
    float:left;
    box-sizing:border-box;
    display:table-cell;
   overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;

}



#rightPanel{
    
  background-color:#B7B192;   
    box-sizing:border-box; 
    padding:20px;
    float:left;
    width:35%;
    overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;
   
   
}



#leftPanel img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
#leftPanel img:hover {
-o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}



#footer{
    
    background-color: gray;
    height:10%;
    text-align: center;
}

.czcionkaMala{
    
    text-align: justify;
   font-family:courier;
   font-style: bold;
    margin: 40px;
    
}

.czcionkaDuza{
    
    text-align: center;
    margin: 30px;
    
    
}

table td{
    
    border:2px solid black;
    
}

 

 

2 odpowiedzi

0 głosów
odpowiedź 18 czerwca 2018 przez rafal.budzis Szeryf (85,260 p.)

Jesli używasz float musisz pamiętać o czyszczeniu go właściwością css clear:both; jesli chcesz to wykonać po nowemu usuń float i dla rodzica tych dwóch diwow ustaw display: flex

 

0 głosów
odpowiedź 18 czerwca 2018 przez pablop76 VIP (123,060 p.)
edycja 18 czerwca 2018 przez pablop76

Względem siebie to raczej w js, ale względem rodzica to już bardziej.

Służy do tego align-item: stretch; Jeżeli korzystasz z flexboxa.

   <div class="container">
      <div class="leftPanel"></div>
      <div class="rightPanel"></div>
  </div>
body{
  background-color: black;
}
.container{
  width: 80%;
  height: 500px;
  margin: 0 auto;
  display: flex;
  align-item: stretch;
  justify-content:  center;
  background-color: green;
}
.leftPanel{
  background-color: red;
  flex-basis: 40%;
}
.rightPanel{
  background-color: blue;
  flex-basis: 40%;
}

Cel zostanie osiągnięty. Ponieważ jeżeli jeden z boksów będzie się zwiększał, to kontener również. A więc i drugi boks  będzie podążał za nimi.

Kompletny przewodnik po Flexbox

Podobne pytania

+1 głos
2 odpowiedzi 1,063 wizyt
pytanie zadane 2 sierpnia 2015 w HTML i CSS przez Patrycjerz Mędrzec (192,340 p.)
0 głosów
3 odpowiedzi 562 wizyt
pytanie zadane 16 listopada 2015 w HTML i CSS przez Dragonet.17 Pasjonat (19,630 p.)
0 głosów
0 odpowiedzi 127 wizyt
pytanie zadane 30 grudnia 2022 w HTML i CSS przez Jacek Drożdżeński Nowicjusz (210 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...