인라인 블록 DIV를 컨테이너 요소의 맨 위에 정렬

인라인 블록 DIV를 컨테이너 요소의 맨 위에 정렬

2시에inline-block div높이가 서로 다른데, 둘 중 짧은 쪽이 용기 상단에 정렬되지 않는 이유는 무엇입니까? (DEMO):

.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; /* <---- this */
}

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

또는 @f00644가 지원할 수 있다고 말한 것처럼.float어린이 요소에도 적용됩니다.

다음을 추가해야 합니다.vertical-align당신의 두 자식 디브의 재산.

한다면.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 을 참조하십시오.

사용하다display: flex부모의 재산div

Flexbox 항목은 가로축의 시작 부분에 정렬됩니다.기본적으로 십자축은 수직입니다.즉, 플렉스 박스 항목이 상단에 수직으로 정렬됩니다.

그래서 당신이 그것을 적용할 때.display: flex부모의 재산div하위 요소를 설정합니다.vertical-align: top.

다음 코드를 참조하십시오.

.container {
  border: 1px black solid;
  width: 320px;
  height: 120px;
  display: flex;
  /** CSS flex */
}

.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>

브라우저 호환성: Flexbox는 최신 브라우저에서 매우 잘 지원됩니다.

<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에 overflow: auto를 추가합니다.http://www.quirksmode.org/css/clearing.html 이 웹 사이트는 이 문제가 발생할 때 몇 가지 옵션을 보여줍니다.

언급URL : https://stackoverflow.com/questions/22092724/align-inline-block-divs-to-top-of-container-element