은 방법 : 컨테이너의 폭이

편집에 도달 할 때 동적 인라인 블록 요소 ** 새 줄을 시작하는 나는 용기은 방법 : 컨테이너의 폭이

내가 MVC 웹 애플리케이션을 구축하고의 폭을 설정 잊고 나는 @foreach이 (모음에있는 var 항목) 인라인 블록 div를 만드는 루프입니다 (서로 옆에 표시되기를 원하기 때문입니다). 내 문제는 루프가 연결된 사용자를 기반으로하므로 생성 된 div 수는 항상 같지 않으며 컨테이너 외부에서 오버플로되는 특정 양을 지나서는 안된다는 것입니다. 컨테이너 너비에 도달하면 다음 동적 div가 새 행에 표시되도록하는 방법 (또는 좋은 방법)이 있습니까?

좋은 하루를 보내고 도움을 줄 수있는 사람이면 누구나 할 수 있습니다.

출처

2014-10-07 Elound

; 총 너비가 너무 크면 다음 줄로 이동합니다. 이것이 작동하지 않는 상황의 예를 들려 줄 수 있습니까? – Katana314

맙소사,이게 다 나쁘다. 나는 컨테이너 클래스를 다시 작성하고 폭 * facepalm *을 설정하는 것을 잊어 버렸다. 하하 나를 깨우는 Thx – Elound

이 문제는 발생하지 않습니다.

display : 인라인 블록으로 처리 할 수 있습니다.

이 경우 컨테이너에 너비를 설정하고 높이를 자동으로 설정할 수 있습니다.

HTML

<div class="container"> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
</div>

CSS

.container {width:100%;height:auto;} 
.content {width:50px; height:50px;background:red; display:inline-block;vertical-align:top;}

마지막으로, 당신은 추가 할 귀하의 foreach와 무엇이든을한다. .content div를 복제하면됩니다. 도움이 되었기를 바랍니다.

.content div의 크기가 다른지 여부는 중요하지 않습니다. 가장 중요한 것은 요소의 높이가 다른 경우 인라인 블록을 사용하기 때문에 vertical-align : top을 설정해야합니다. 서로 나란히있는 것은 아닙니다.

인라인 블록은 Javascript없이 Pinterest처럼 거의 표시 할 수 있습니다. 건배

DEMO

실제로 설정된 폭을 갖는 블록 요소 내에 인라인 블록 요소의 기본 동작되어야

출처

2014-10-07 15:45:00 specialone

은 방법 : 컨테이너의 폭이

답변

관련 문제