CSS 자동 상단 div

간단한 CSS 관련 질문에 대한 도움이 필요합니다.CSS 자동 상단 div

인라인 블록 및 세로 맞춤 : 아래의 사례는 맨 위? 여기

는 CSS :

<div class="content_wall_column"> 
    <div class="content_wall">...</div> 
    <div class="content_wall">...</div> 
</div> 

<div class="content_wall_column"> 
    <div class="content_wall">...</div> 
</div>

내 JSFiddle를 참조하십시오 여기

vertical-align: top; 
display: inline-block; 
width: 194px; 
background: #fff; 
border-left: 1px solid #c0c0c0; 
border-right: 1px solid #c0c0c0; 
border-top: 1px solid #c0c0c0; 
border-bottom: 1px solid #c0c0c0; 
word-wrap: break-word; 
padding: 10px; 
margin-top: 5px; 
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2); 
text-align: left;

하고 ...

출처

2013-10-10 Asean Jazz

는 "자동차 최고 DIV"무엇을 의미합니까? – DevlshOne

공백을 넣지 말고 바로 아래에 맞습니다. –

이 문제는 jquery에서해야합니다. 이 한계 만 css. – ggDeGreat

를 사용하여 여러 열을 많이 절상 fiddle

도움이됩니다.

출처

2013-10-10 04:26:26

그러나이 답변처럼, 나는 컬럼을 만들지 않고 어떻게하는지 궁금합니다. 그래서 CSS는 html 구조에 엄격하지 않으므로 무한한 양의 coloms를 만들 수 있습니다 (화면에 맞으면) – nkmol

변화 마진과 패딩을 제거이

.content_wall 
{ 
vertical-align: top; 
display: inline-block; 
width: 194px; 
background: #fff; 
border-left: 1px solid #c0c0c0; 
border-right: 1px solid #c0c0c0; 
border-top: 1px solid #c0c0c0; 
border-bottom: 1px solid #c0c0c0; 
word-wrap: break-word; 
padding: 0px; 
margin-top: 0px; 
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2); 
text-align: left; 
}

같은 클래스 content_wall에 대한 CSS;

Demo Fiddle

또는 더 나은 은 패딩이 먼저 .content_wall에서 margin-top: 5px 제거이

.content_wall 
{ 
vertical-align: top; 
display: inline-block; 
width: 194px; 
background: #fff; 
border-left: 1px solid #c0c0c0; 
border-right: 1px solid #c0c0c0; 
border-top: 1px solid #c0c0c0; 
border-bottom: 1px solid #c0c0c0; 
word-wrap: break-word; 
padding: 10px; 
padding-top:0px; 
margin-top: 0px; 
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2); 
text-align: left; 
}

Fiddle for this

출처

2013-10-10 04:30:10 Rex

처럼 상단 패딩 을 제거 제공,하지만 당신은 아마 그들을 원하지 않는다 서로 닿으므로 제거하지 말고 margin-bottom: 5px으로 변경하십시오.

그런 스타일 시트에 다음을 추가합니다

body, html { 
    margin: 0; 
    padding: 0; 
}

확인 the updated fiddle

출처

2013-10-10 06:15:14 LinkinTED

CSS 자동 상단 div

답변

관련 문제