div 내용이 안짤리고 줄넘김을 어떻게 하나요?
본문
css에는
.div { display:inline; }을 주었구요.
<div>문장</div><div>문장</div><div>문장</div><div>문장</div><div>문장</div>....<div>문장</div><div>문장</div>
이렇게 되어있다고 하면
div 한 객체(?)가 한줄로 쭈욱 나오다가 다음줄로 넘어갈때 div가 통채로 넘어가는게 아니라 문장이 짤려서 넘어가더군요..
이렇게 안되고 div 하나가 하나의 블록처럼 문장이 넘어가는게 아니라 블록채 넘어가는 방법은 어떤게 있을까요?
설명을 쉽게 한다고 했는데 좀 이상하네요..^^
답변 3
<style>
div.main{ clear:left; }
div.zzz{ display:inline; float:left; margin-right:5px; }
</style>
<h2>줄 넘김 테스트</h2>
<div class="zzz main">진한 커피향</div><div class="zzz">봄이로구나 봄봄봄</div>
<div class="zzz">개나리꽃</div><div class="zzz">진달래꽃</div>
<div class="zzz">개구리도 개골개골</div><div class="zzz">나비도 훨훨</div>
<div class="zzz">봄이로구나 봄봄봄</div><div class="zzz main">진한 커피향</div><div class="zzz">봄이로구나 봄봄봄</div>
<div class="zzz">개나리꽃좋아</div><div class="zzz">진달래꽃</div>
<div class="zzz">개구리도 개골개골</div><div class="zzz">나비도 훨훨</div>
<div class="zzz">봄이로구나 봄봄봄</div>
div 의 width, height를 용도에 맞게 조절하시면 되겠습니다.
아~ 중간에 한번씩 clear로 정리해줘야하는군요...
감사합니다 ^^
잘 아시겠지만
width, height 값을 주기 위해서는 inline 보다 inline-block를 사용하셔야 합니다.
덕분에 이것 저것 찾아 볼 기회가 되었습니다 ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.