div가 잘리는 것을 막는 방법이 궁금합니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
div가 잘리는 것을 막는 방법이 궁금합니다.

QA

div가 잘리는 것을 막는 방법이 궁금합니다.

본문

Div에 칼럼을 적용하고, 그 안에 여러 개의 div를 넣었습니다. 

그랬더니 아래처럼 div가 잘려서 보입니다.

(아래에 보면, 숫자 5가 있는 div에서 "여기"라고 적힌 것은 원래 하나의 div입니다. )

그런데 이렇게 잘려서 두 개로 나옵니다. 

div 잘림 방지를 하려면 어떻해야 하나요? 즉 div 모양 유지를 원하는데....

 

코드는 column을 사용했습니다.

.layout { column-count: 4; } 이렇게 했는데요...

목적은 내부 div가 아래로 여러 개가 쌓이게 하는 것입니다. 

아래로 쌓이게 했더니 잘려서 다음 컬럼으로 올라가네요 글쎄...ㅠㅠ

 

도움을 부탁드려요!

 

3034974838_1652163474.7693.png

 

 

 

 

이 질문에 댓글 쓰기 :

답변 2

<p>
<div class="rtyrrr">
1<br>
</div>
</p>

대신에

이렇게 써 보세요. <p>는 안에 텍스트 성격의 요소만 들어 가는 것이 보통입니다.

<div class="rtyrrr">
<p>
1<br>
</p>
</div>

별거 아닌 일에 이렇게 관심 써 주신 거 정말정말 고맙습니다.!!
<p>와 </p>를 모두 제거하고 완전 새로고침까지 해 봤는데 마찬가지네요.

column 속성이 원래 이런가요? 검색을 해 봐도 div 잘리는 현상에 대한 건 나오지도 않고... ㅠㅠ
div가 이렇게 잘리는 건 처음 보는 현상이라 난감하네요.

관련 자료를 찾을 수 없어서 모르겠지만...
column 속성이 원래 그런가 봅니다. 줄단위로 잘라서 다음으로 넘기는...

결국 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 106
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT