CSS3 Kolumny Dzieli Mid-div

Mam stronę internetową ze strukturą następująco:CSS3 Kolumny Dzieli Mid-div

<div id="content"> 
    <div class="post"> 
      <p>content1</p> 
    </div> 
    <div class="post"> 
      <p>content2</p> 
    </div> 
    <div class="post"> 
      <p>content3</p> 
    </div> 
    <div class="post"> 
      <p>content4</p> 
    </div> 
</div>

i używam kolumny CSS3 dla układu 2-kolumny tak, że odległość (marża) między każdym div .post powyżej, poniżej, po lewej, a po prawej 20px. Problemem, który mam, jest to, że czasami dolny lewy dolny div.post zostaje odcięty i kontynuuje w górnej prawej kolumnie.

Mam problem z uzyskaniem pełnego div.post, aby pozostać na dole lewej kolumny zamiast dzielenia i kończenia wyświetlania w prawej kolumnie. Byłbym wdzięczny za każdą pomoc, jaką mogę uzyskać! Dzięki!

Ponadto, wysokość każdego słowa div.post może być różna, więc przenoszenie wszystkiego w lewo nie działa dobrze (jest niechlujnie).

EDIT: tu jest istotne CSS:

#content { 
    margin-bottom:20px; 
    width:910px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 0; 
    -moz-column-count: 2; 
    -moz-column-gap: 0;  
    column-count: 2; 
    column-gap: 0; 
} 

.post { 
    width:410px; 
    margin:20px; 
    padding:10px; 
}

Źródło

2012-01-07 redgem

Możesz opublikować css, jak również? – Emil

Powtórzyłem problem tutaj: http://jsfiddle.net/P7vqr/ – mwcz

Dzięki za to, @mwcz – redgem

Jak rozumiem CSS3 columns ten przeznaczony jest zachowanie. Zostały one zaprojektowane do obsługi wielokolumnowego tekstu gazetowego, w którym każda kolumna przechodzi do następnego. Nie czytałem jeszcze specyfikacji, więc używanie ich do układu bloków może być wykonalne.

Edytuj: Natknąłem się na to dzisiaj: controlling wrapping in css3 columns. Przyznaję, że tego nie próbowałem, ale brzmi to jak to, czego szukasz.

Źródło

2012-01-07 05:41:43 mwcz

Prawda, ale miałem nadzieję, że sposób wymusić divs nie łamać kolumny w ten sposób. Wydaje się, że byłoby to pożądane zachowanie dla układu treści. – redgem

Zaktualizowałem swoją odpowiedź z możliwym rozwiązaniem, na które natknąłem się. – mwcz

Zapobieganie kolumny łamanie elementów wewnątrz z następującego kodu:

-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid;

poprzez CSS Tricks

Źródło

2015-10-16 10:29:27 sidonaldson

Dla zapisu idą one na elementach potomnych, więc '.post' w tym przykładzie. –

CSS3 Kolumny Dzieli Mid-div

Odpowiedz

Powiązane problemy