div의 두 행을 표시하는 방법

for 루프를 사용하여 한 행에 div를 표시하고 있습니다. 먼저 div 표시 완료하지만 새 div를 삽입하십시오. 첫 번째 div와 동일한 새 div를 삽입하는 방법. 고맙습니다.div의 두 행을 표시하는 방법

"first-div first-div first-div first-div first-div first-div first-div first-div "

지금 내가 루프 같은 사용하여 첫 번째 사업부의 아래에 또 다른 사업부를 보여주고 싶은 -로 지금이 보여주는.

나는 this-

"first-div first-div first-div first-div first-div first-div first-div first-div" 

"minor-div minor-div minor-div minor-div minor-div minor-div minor-div minor-div"

CSS 코드 -

#default-Div{ 
overflow-x: scroll; 
width: 830px; 
white-space:nowrap; 
height: 110px;

}

.calender-column{ 
width:160px; 
height:110px;  
border:1px solid #0174DF; 
    display:inline-block;

PHP처럼 원하는 - HTML 코드 -

<div id="default-Div" > 
<?php $temp=1; for($j=0;$j<30;$j++){?> 

<div id="calender-column<?php echo $temp;?>" class="calender-column" > 

<?php $temp++; } ?> 
</div>

출처

2013-11-27 user3030853

. 캘린더 열은 내 first-div를 의미합니다. – user3030853

display: inline;을 width 및 height과 함께 사용할 수 없습니다. 더 이상 인라인이 아니기 때문입니다. 자세한 내용은 CSS Specification on display에서 확인할 수 있습니다. 말하자면, display: inline;으로 이것은 가능하지 않습니다.

다행히도 display에 대한 새로운 (ish) 속성 값은 원하는대로 정확하게 처리 할 수 있습니다. display: inline-block; - 문서 흐름에는 인라인이지만 블록 수준 요소와 같은 종류의 표시가 가능합니다.

.calender-column{ 
width:160px; 
height:110px;  
border:1px solid #0174DF; 
    display:inline-block; }

... 그리고 당신이 잘 :)

참고 수 있습니다 : 유일하게주의해야 할 점은, inline-block는 IE 6에서 작동하지 않거나 7. 당신은, 그러나, 순수 inline에 표시를 변경할 수 있습니다 어쨌든 그들은 inline을 inline-block으로 잘못 렌더링하므로 두 브라우저에만 해당됩니다.

출처

2013-11-27 06:14:03 Ming

div의 두 행을 표시하는 방법

답변

관련 문제