[HTML][CSS] unikanie przełamania kolumny Opcje

[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.