[css] 컨테이너 요소 상단에 인라인 블록 DIV 정렬

Program / 글쓴이

두 개의 inline-block div높이가 다른 경우 왜 두 개의 짧은 것이 컨테이너의 상단에 맞지 않습니까? ( 데모 ) :

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

스 니펫 확장

div용기 상단에 작은 것을 어떻게 정렬 할 수 있습니까?

답변

vertical-align이 기본 으로 기본 설정되어 있기 때문 입니다 .

vertical-align:top대신 사용하십시오 :

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

또는 @ f00644 는 float하위 요소 에도 적용 할 수 있다고 말했습니다 .

답변

vertical-align두 개의 자식 div에 속성 을 추가해야합니다 .

.small항상 짧은 경우 속성을에 적용하면됩니다 .small. 하나가 가장 높은이 될 수 있다면 그러나, 당신은 모두 재산 적용해야합니다 .small및 .big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

세로 정렬은 인라인 또는 테이블 셀 상자에 영향을 미치며이 속성에 대해 다른 값의 큰 숫자가 있습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 을 참조하십시오.

답변

<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})

답변

오버플로 추가 : 컨테이너 div에 자동
http://www.quirksmode.org/css/clearing.html 이 웹 사이트는이 문제가 발생했을 때 몇 가지 옵션을 보여줍니다.

답변