DIV는 높이와 너비에 따라 어떻게 위치시킬 수 있습니까?

어떻게 카드 (divs)를 첫 번째 열에 밀어 넣을 수 있습니까? (div 높이가 가변적이므로 깔끔하게 보입니다.) 이것은 HTML 상자 모델의 한계입니까, 아니면 자바 스크립트를 사용하지 않고 hackish 기술이 있습니까? 몸의 배경색을이 카드와 일치시켜이 카드를 숨기지 않습니다.DIV는 높이와 너비에 따라 어떻게 위치시킬 수 있습니까?

아래 이미지의 HTML에 나는이 div들을 인라인하기 위해 float : left 속성을 사용했습니다. 사업부에 대한

screenshot for div positioning

CSS 클래스는 여기에 더 많은 정보를 추가

.test{ 
    background:grey; 
    float:left; 
    width:100px; 
    margin:5px; 
}

입니다. 이 div를 2/3 열에 넣고 싶지 않습니다.
Google Plus에서 비슷한 게시물을 구현하려고합니다. 모든 div는 높이와 너비를 포함 할 수 있습니다 !!! HTML은 공백없이 div를 자동으로 배치해야합니다.

나는이 문제에 대한 바이올린을 만들었습니다. http://jsfiddle.net/Phkz6/

출처

2013-08-27 naren

일부 div에 여백이있는 것 같습니다. 몇 가지 코드를 공유하는 데주의해야합니까? – srijan

현재 HTML 마크 업과 CSS를 게시하십시오. [피들] (http://jsfiddle.net) –

'div'의 양쪽면에서 동일한 높이 (둘 중 큰 값)를 사용하면 더 좋지 않겠습니까? 이를 위해'table'을 사용하십시오. – mattytommo

대신 inline-block을 사용하는 것이 좋습니다. 이렇게하면 height 속성을 제어 할 수 있습니다.

출처

2013-08-27 18:10:48 beautifulcoder

인라인 블록 공간을 사용할 때 위와 같이 나타나고 세로 맞춤을 위로 설정하십시오. 공간은 여전히 존재합니다 !! – naren

높이를 'height : 200px'로 설정해야합니다. 나는 당신의 바이올린을 업데이트했습니다. – beautifulcoder

-1

우리는 분명히 자세한 내용에 대한 코드가 필요하지만, :

당신은 플로트를 사용하는 가정 : 때때로 항목에서 왼쪽 또는 디스플레이 : 인라인 블록 등은 "정상을 수직 정렬"을 시도 할 수 있습니다 간단한 스택의 트릭입니다.
표는 그리드에 가장 적합하며 매우 평행 한 행을 갖지만 셀이 고르지 않게 보이는 예쁜 "스프레드 시트 틱"모양을 갖습니다.
또한 벽돌/동위 원소는 계획에 정말로 시원하고 공정하게 추가 할 것입니다.

출처

2013-08-27 18:15:22 Dylan

나는 이런 식으로 할 거라고 :

분할을 내용 영역을 두 개의 열 (display: inline-block와 폭이 각)
각 포스트에 폭을 가져야한다 ~ = 95 %
여기

왼쪽 하나에 작은 마진 권리는 무슨 뜻인지를 보여주는 jsfiddle입니다 :jsfiddle

출처

2013-08-27 18:16:08

네, 맞습니다.하지만 원했던 것은 열이 없기 때문에 창 너비가 행의 세 divs 또는 행의 한 div에 맞게 사용할 수있을 때 자동으로 배치됩니다. (단순히 Gplus 게시물처럼) – naren

DIV는 높이와 너비에 따라 어떻게 위치시킬 수 있습니까?

답변

관련 문제