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

Stylizacja rozszerzającego się diva

Aruba Cloud - Virtual Private Server VPS
0 głosów
284 wizyt
pytanie zadane 19 listopada 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
Witam, chce stworzyć okno z komentarzami, problem polega na tym, że nie wiem jak mam to zestylować. Projekt jakiś tam mam ale nie wiem co zrobić w paru przypadkach typu:
- Jeżeli tekstu jest więcej niż normalnie to powiększ tego diva w dół
 

Kod, widać tam dokladnie o co chodzi:

http://codepen.io/FoxCode/pen/MbJodL

2 odpowiedzi

+1 głos
odpowiedź 19 listopada 2016 przez Czort Nałogowiec (32,500 p.)
wybrane 19 listopada 2016 przez BlvckFox
 
Najlepsza
overflow:auto; w .comment
0 głosów
odpowiedź 19 listopada 2016 przez pablop76 VIP (123,540 p.)
edycja 19 listopada 2016 przez pablop76

Witam. Złe użycie float: left; Dobrze ułożyłeś divy ale źle wystylizowałeś. Pojemnik sam się dostosuje do wysokości tekstu przy prawidłowym użyciu class. Na początek usuń float: left; dla c-content.Nie zapominaj o clear: both;

Ja uzyłbym dispaly: inline-block; a float: left; tylko dla avatara.

body{
  margin: 0; padding:0;
  font-family: sans-serif;
}
.comment{
  width: 300px;
  background-color: #111;
  min-height: 100px;
}
.c-avatar{
  float: left;
  width: 50px;
  height: 50px;
  background-color: #eee;
  margin-right: 5px;
}

.c-name{
  display: inline-block;

  color: #ccc;
}
.c-date{
  max-width: 81px;

  color: #333;
  display: inline-block;
}
.c-content{
  
  margin-bottom: 5px;
  margin-right: 5px;
  color: #888;
/* word-wrap: break-word; */
/* word-break: break-all; */
  width: 230px;
  padding: 5px 0 25px 60px;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 309 wizyt
pytanie zadane 28 lipca 2020 w HTML i CSS przez eugi Użytkownik (610 p.)
0 głosów
4 odpowiedzi 659 wizyt
pytanie zadane 28 stycznia 2016 w HTML i CSS przez Mavimix Dyskutant (8,420 p.)
0 głosów
1 odpowiedź 153 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez c3cylone Nowicjusz (180 p.)

93,324 zapytań

142,323 odpowiedzi

322,389 komentarzy

62,653 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...