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

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>

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

회원로그인

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