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

Jak ustawić bloki z opiniami jeden pod drugim?

Object Storage Arubacloud
0 głosów
74 wizyt
pytanie zadane 11 października 2023 w HTML i CSS przez osqarek Nowicjusz (140 p.)

Witam. Jestem osobą początkującą w zakresie HTML i CSS. Aby rozwinąć swoje możliwości wykonuję ostatnio zadania egzaminacyjne, a obecnie przerabiam zadania egzaminacyjne EE.09., tylko że bez skryptów i robię je tylko za pomocą HTML i CSS. Zrobiłem już wszystko, oprócz środka na którym miały się znajdować dwa bloki z opiniami. Niestety całość mi się rozwala, wraz nawet ze stopką. Jakiego polecenia mam użyć aby wszystko było składne? Dodatkowo imiona w opinii są wyśrodkowane u góry a nie są po lewej stronie obok zdjęcia. Czy trzeba coś zrobić w HTML czy CSS? Dodatkowo przesyłam treść kodu z opiniami w HTML/CSS.

Z góry bardzo dziękuję za odpowiedź. Mam nadzieję że wszystko dobrze wytłumaczyłem ;)

Najpierw CSS, a następnie dwa HTML-e.

.opinie{
	background: white;
	color: dimgray;
	width: 60%;
	height: 220px;
	margin: 40px auto;
	box-shadow: 0 0 10px 5px dimgray;
}
<div class="opinie">
        <div class="opinia1">
            <img src="jacek.jpg" alt="Zdjęcie 1">
            <div class="info">
                <h1>Jacek</h1>
                <p>Polecam to miejsce każdemu!</p>
	</div>
<div class="opinie">
        <div class="opinia2">
            <img src="zbigniew.jpg" alt="Zdjęcie 2">
            <div class="info">
                <h2>Zbigniew</h2>
                <p>Miła obsługa i BHP!</p>
    </div>

 

1 odpowiedź

0 głosów
odpowiedź 11 października 2023 przez VBService Ekspert (254,490 p.)

Nie "zamknąłeś" div-ów

.opinie{
    background: white;
    color: dimgray;
    width: 60%;
    height: 220px;
    margin: 40px auto;
    box-shadow: 0 0 10px 5px dimgray;
}
<div class="opinie">
  <div class="opinia1">
    <img src="jacek.jpg" alt="Zdjęcie 1">
    <div class="info">
      <h1>Jacek</h1>
      <p>Polecam to miejsce każdemu!</p>
    </div>
  </div>
</div>

<div class="opinie">
  <div class="opinia2">
    <img src="zbigniew.jpg" alt="Zdjęcie 2">
    <div class="info">
      <h2>Zbigniew</h2>
      <p>Miła obsługa i BHP!</p>
    </div>
  </div>
</div>

 

Podobne pytania

0 głosów
3 odpowiedzi 692 wizyt
pytanie zadane 20 maja 2020 w HTML i CSS przez marsoonn Początkujący (460 p.)
0 głosów
1 odpowiedź 895 wizyt
pytanie zadane 10 grudnia 2018 w HTML i CSS przez Whereismycode Obywatel (1,710 p.)
+1 głos
3 odpowiedzi 2,057 wizyt

92,657 zapytań

141,551 odpowiedzi

319,990 komentarzy

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...