div가 잘리는 것을 막는 방법이 궁금합니다.
본문
Div에 칼럼을 적용하고, 그 안에 여러 개의 div를 넣었습니다.
그랬더니 아래처럼 div가 잘려서 보입니다.
(아래에 보면, 숫자 5가 있는 div에서 "여기"라고 적힌 것은 원래 하나의 div입니다. )
그런데 이렇게 잘려서 두 개로 나옵니다.
div 잘림 방지를 하려면 어떻해야 하나요? 즉 div 모양 유지를 원하는데....
코드는 column을 사용했습니다.
.layout { column-count: 4; } 이렇게 했는데요...
목적은 내부 div가 아래로 여러 개가 쌓이게 하는 것입니다.
아래로 쌓이게 했더니 잘려서 다음 컬럼으로 올라가네요 글쎄...ㅠㅠ
도움을 부탁드려요!
답변 2
<p>
<div class="rtyrrr">
1<br>
</div>
</p>
대신에
이렇게 써 보세요. <p>는 안에 텍스트 성격의 요소만 들어 가는 것이 보통입니다.
<div class="rtyrrr">
<p>
1<br>
</p>
</div>
별거 아닌 일에 이렇게 관심 써 주신 거 정말정말 고맙습니다.!!
<p>와 </p>를 모두 제거하고 완전 새로고침까지 해 봤는데 마찬가지네요.
column 속성이 원래 이런가요? 검색을 해 봐도 div 잘리는 현상에 대한 건 나오지도 않고... ㅠㅠ
div가 이렇게 잘리는 건 처음 보는 현상이라 난감하네요.
관련 자료를 찾을 수 없어서 모르겠지만...
column 속성이 원래 그런가 봅니다. 줄단위로 잘라서 다음으로 넘기는...
https://www.w3.org/TR/css-multicol-1/#break-before-break-after-break-inside
이런 방법이 있기는 한데 적절할지는 모르겠네요.
결국 div 잘리는 원인을 찾지 못해서요... column-width와 figure로 처리하니까 안 잘리네요.
div 포기하고 figure로 작업 중입니다.
그런데, 정말 친절한 분이시네요.
이런 자료도 찾아주시고... 감사합니다!
찾아주신 자료에도 여러 가지 볼만한 게 많네요. 덕분에 자세히 공부할 수 있게 되었습니다.
감사합니다!!
저도 검색하면서
겸사겸사 공부도 하는 거죠.
해당 페이지 주소(URL)을 올려 보세요.
뒷걸음을 치자면
마진이나 패딩이 음수로 되어 있는 게 아닐까요?
관심 주셔서 감사합니다.
코드는 달랑 저게 다 입니다.
head.php나 xxx.css 같은 건 부르지도 않았구요, 전체 코드는 아래가 다입니다.
혹시 div 모양을 그대로 유지하는 법 아시나요??
<!doctype html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style type="text/css">
.multi-layout { column-count: 4; }
.rtyrrr { width:100%; border:1px solid #ff6600; background-color:#ffff33; margin:5px 0px 5px 0px; }
</style>
<div class="multi-layout">
<p>
<div class="rtyrrr">
1<br>
</div>
</p>
<!-- 이하, 같은 거 계속 반복이니 다 안 보셔도 됩니다. -->
<p>
<div class="rtyrrr">
2<br><br><br><br><br><br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
3<br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
4<br><br>
</div>
</p>
<p>
<div class="rtyrrr">
<div id="">
5 여기<br><br><br><br><br><br><br><br>여기<br><br>
</div> <?php // id=""; ?>
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6 ds dsd
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br><br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br><br><br><br><br><br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br>3<br>4<br>
</div>
</p>
<p>
<div class="rtyrrr">
6<br>3<br>4<br>5<br>6<br>3<br>4<br>
</div>
</p>
</div>
</body>
</html>
