세로 맞춤 div 내 스팬

아래 코드를 실행하여 화면 가운데에 세 개의 열을 만듭니다. 내가 가진 문제는 각 범위에 다양한 양의 콘텐츠를 추가 할 때 하나가 다른 두 가지 콘텐츠보다 훨씬 높습니다. 기본 페이지의 배경은 검은 색이고 각 경간은 흰색입니다.세로 맞춤 div 내 스팬

<div style="width:100%; text-align:center; min-width:1200px;"> 
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; "> 
     Content 
</span> 
<span style="display: inline-block; width:300px; height:300px; background-color:#fff;"> 
     Content 
</span> 

<span style="display: inline-block; width:300px; height:300px; background-color:#fff; margin:0px; padding:0px;"> 
     Content blah blah blah 
</span> 
</div>

모든 스팬이 동일한 수직 위치가되도록 어떻게 만들 수 있습니까? 높이를 모두 같은 값으로 설정했습니다

출처

2012-09-20 Somk

에서 당신이 중간에 모든''s 및 위치 해당 요소를 포장하려 되세요 대신 래퍼가 가장 높은 ''으로 확장됩니까? –

당신이 원하는 결과의 이미지를 게시 할 수있는 것은 무엇입니까? –

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 

body{ 
background:black; 
} 

.mydiv{ 
margin-left:100px; 
width:300px; 
float:left; 
} 
</style> 
</head> 
<body> 


<div style="width:100%; text-align:center; min-width:1200px;"> 

<div class="mydiv"><span style="display: inline-block; width:300px; background- color:#fff; "> 
     blahblah blah blah blahblah blah blah blahblah blah blah 
</span></div> 
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff;"> 
     Hello Wolrd!blah blah blahblah blah blah 
</span> 
</div> 
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff; margin:0px; padding:0px;"> 
     Content blah blah blah 
</span></div> 
</div> 

</body> 
</html>

출처

2012-09-20 12:20:40 Afshin

css 속성 display: table-cell;vertical-align:middle은 블록을 세로로 가운데에 배치합니다.

<div style="width:100%; text-align:center; min-width:1200px;"> 
<span style="width: 300px; height: 300px; background-color: rgb(255, 255, 255); display: table-cell; vertical-align: middle;"> 
     Content 
</span> 
<span style=" width:300px; height:300px; background-color:#fff; display: table-cell; vertical-align: middle;"> 
     Content 
</span> 

<span style=" width:300px; height:300px; background-color:#fff; margin:0px; padding:0px; display: table-cell; vertical-align: middle;"> 
     Content blah blah blah 
</span> 
</div>

출처

2012-09-20 12:08:14 vusan

최신 브라우저의 경우 columns^{W3C docs} CSS 속성을 사용할 수 있습니다.

HTML

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

CSS

.container{ 
    width:100%; 
    min-width:1200px; 
    background-color:black; 
} 
.columns{ 
    -moz-columns:300px 3; 
    -webkit-columns:300px 3; 
    columns:300px 3; 
    width:900px; 
    text-align:center; 
    background-color:white; 
    margin:0 auto; 
}

데모 http://jsfiddle.net/b2fNk/1

출처

2012-09-20 12:13:01

세로 맞춤 div 내 스팬

답변

관련 문제