Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] unikanie przełamania kolumny
Forum PHP.pl > Forum > Przedszkole
stellatus
Kod
<style>
.multicol {
  background-color: beige;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted olivedrab;

  /* Firefox */
  -moz-column-count: 3;
  -moz-column-rule: 2px dotted olivedrab;

  /* CSS3 */
  column-count: 3;
  column-rule: 2px dotted olivedrab;
}

.multicol hr {
  break-after: column;
}

</style>
<div class="multicol">
  <h3>Legs</h3>
  <p>The key is to use good form, and not to over train your muscles. You need to let your muscles rest in between workouts. Give them 3 or 4 days to rest before training them again. Follow up each workout with a protein shake and your legs will never be the same.</p>
  <hr>
  <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
  <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. </p>
  <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
    <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
    <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
</div>


Jak to zrobić, żeby h3 nie zostawały same, gdy przełamywana jest kolumna, tylko żeby były przenoszone do następnej kolumny?



Próbowałem:

Kod
h3 {
    break-after: avoid;
    break-inside: avoid;
}


ale to nie działa.
trueblue
Nie działa, bo nagłówek i treść to osobne elementy. Opakuje razem w jakiś kontener.
stellatus
Dzięki. A nie ma żadnego polecenia w stylu: "nie łam kolumny w tym miejscu"?
trueblue
Nie ma. Bo po co(?)
stellatus
Bo tak łatwiej byłoby napisać skrypt JS. Potrzebne mi jest coś takiego do tego projektu: https://codepen.io/rudolph-reti/pen/povYZmP
Czyli ten sposób z opakowaniem w kontenery byłby Twoim zdaniem najprostszy?
trueblue
Jeśli nagłówek i wpisy będą osobnymi elementami względem rodzica, który ma kolumny to nie unikniesz przypadku kiedy obydwa znajdą się w odrębnych kolumnach.
Tak, tylko kontener.
stellatus
Dzięki bardzo.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.