CSS 인라인 문제

아래 코드가 있습니다. 위브는CSS 인라인 문제

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5, CSS3 and JavaScript demo</title> 
</head> 
<body> 
<!-- Start your code here --> 

<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div> 
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div> 

<!-- End your code here --> 
</body> 
</html>

CSS는

* { 
    padding: 0; 
    margin: 0; 
} 
.box1 { 
    position: relative; 
    display: inline-block; 
    background: grey; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 

} 
.box2 { 
    position: relative; 
    display: inline; 
}

는하지만 상당히 아래에서 BOX2 내용이 상단에서 시작되지 않는 이유 나를 이유을 이해하는 데 도움이됩니다이다? 거기에 어떤 특별한 이유가 있습니까? 나는 float를 추가하여이를 해결할 수 있지만이 동작에 궁금 할뿐입니다.

누군가 나를 이해할 수 있도록주십시오. .box1의 기본 텍스트의 마지막 라인 때문에

미리 감사

출처

2014-09-11 user3751873

이것은'vertical-align : top;'을'.box2', demo - http://liveweave.com/b9dVx5 – Anonymous

에 적용 해 주셔서 감사합니다. Mary 님, 저는 해결책이 아닌이 행동의 이유를 알고 싶었습니다. 어쨌든 고마워요 – user3751873

"왜"나는 충분히 두려워합니다. 그러나 위치를 '절대'로 변경하면 저에게 효과적이었습니다. 어쩌면이 스타일 속성 (또는 디스플레이 하나)을 둘러싼 규칙으로 범위를 좁힐 수 있습니다. – ne1410s

에서이 동작을합니다. .box2은이 마지막 줄과 같은 줄에서 시작하여 왜 맨 아래에 있는지 설명합니다. 그런 다음 inline 속성을 사용하면 .box2이 <p> 태그에있는 것처럼 계속 .box1 아래에 있습니다. 당신은 나의 설명을 이해하기를 바랍니다.

출처

2014-09-11 12:34:10 Wang

CSS 인라인 문제

답변

관련 문제