div를 새 줄에 입력하십시오.

이 자바 스크립트 카운트 다운을 프로그래밍했지만 div에 문제가 있습니다. div를 새로운 라인으로 만들려면 어떻게해야합니까?div를 새 줄에 입력하십시오.

5 시간 : 21min : 3sec0h : 56min : 4 초

하지만 어떻게 내가 이런 식으로 포맷 할 수 있습니다 나는 내가 생각하는 새로운 라인은 지금 내 왼쪽 시간은 다음과 같이 형식의 말할 때? 그 때마다 새로운 라인에 있습니다.

5 시간 : 21min : 3 초

0H : 56min : 4 초

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</head> 
<body> 
<script> 
var d = new Date(); 
var n = d.getDay(); 
if(n == 1 || 2 || 3 || 4 || 5){ 
var timer1; 
function cdtd1() { 
    var sad1 = new Date(); 
    var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),23,30,00); 
    var timeDiff1 = dolazak1.getTime() - sad1.getTime(); 
    if (timeDiff1 <= 0) { 
     clearInterval(timer1); 
       document.getElementById(id).innerHTML = ''; 
    } 
    var sekunde1 = Math.floor(timeDiff1/1000); 
    var minute1 = Math.floor(sekunde1/60); 
    var sati1 = Math.floor(minute1/60); 
    var dani1 = Math.floor(sati1/24); 
    sati1 %= 24; 
    minute1 %= 60; 
    sekunde1 %= 60; 

    $("#dani1Box").html(dani1); 
    $("#sati1Box").html(sati1 + ':'); 
    $("#minute1Box").html(minute1 + ':'); 
    $("#sekunde1Box").html(sekunde1); 

    timer1 = setTimeout(cdtd1, 1000); 
} 

$(document).ready(function() { 
    cdtd1(); 
}); 

var timer2; 
function cdtd2() { 
    var sad2 = new Date(); 
    var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),24,00,00); 
    var timeDiff2 = dolazak2.getTime() - sad2.getTime(); 
    if (timeDiff2 <= 0) { 
     clearInterval(timer2); 
       document.getElementById(id).innerHTML = ''; 
    } 
    var sekunde2 = Math.floor(timeDiff2/1000); 
    var minute2 = Math.floor(sekunde2/60); 
    var sati2 = Math.floor(minute2/60); 
    var dani2 = Math.floor(sati2/24); 
    sati2 %= 24; 
    minute2 %= 60; 
    sekunde2 %= 60; 
    $("#dani2Box").html(dani2); 
    $("#sati2Box").html(sati2 + ':'); 
    $("#minute2Box").html(minute2 + ':'); 
    $("#sekunde2Box").html(sekunde2); 

    timer2 = setTimeout(cdtd2, 1000); 
} 

$(document).ready(function() { 
    cdtd2(); 
}); 
} 
</script> 





<style type="text/css"> 
#dani1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#sati1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 


#minute1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 



#sekunde1Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#dani2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

#sati2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 


#minute2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 



#sekunde2Box{font-size:70px; 
     color:#1f62a7; 
     font-family:Sans-serif; 
     display: inline-block; 
} 

h1{font-size:70px; 
    color:#1f62a7; 
    font-family:Sans-serif; 
    display: inline-block; 
} 

</style> 
    <center> 
    <div id="sati1Box">></div> 

    <div id="minute1Box"></div> 

    <div id="sekunde1Box"></div> 
    </div> 


    <h1> </h1> 

    <div id="sati2Box"></div> 

    <div id="minute2Box"></div> 

    <div id="sekunde2Box"></div> 
    </div> 

    </center> 
</body>

출처

2014-02-05 user3238555

div를 기본적으로 새로운 라인으로 이동합니다. display: inline-block;을 추가하여이 작업을 수행하지 않도록했습니다.

div에 요소를 래핑하고 기본값은 display: block으로 설정하고 개별 div는 inline-block으로 유지하는 것이 좋습니다. 다음과 같은 내용 :

<div> 
    <div id="sati1Box"></div> 
    <div id="minute1Box"></div> 
    <div id="sekunde1Box"></div> 
</div> 
<div> 
    <div id="sati2Box"></div> 
    <div id="minute2Box"></div> 
    <div id="sekunde2Box"></div> 
</div>

출처

2014-02-05 22:18:33

감사합니다. :) – user3238555

div를 새 줄에 입력하십시오.

답변

관련 문제