페이스 북은 이미지 옆에있는 버튼과 같이 위치합니다.

Question

http://jsfiddle.net/ADLrh/

잘하면 내가 뭘하고 있는지 알 수 있습니다. 맨 위 줄에있는 3 개의 '필러'가 침몰하여 피라미드 모양의 형성을 뒤집습니다. 이 문제의 원인은 무엇입니까?

편집 : 잠재적으로 모든 필러가 같은 버튼이 될 수 있고 실제 피라미드가 훨씬 크기 때문에 유연한 방법을 추가해야한다고 덧붙여 야합니다.

Answer 1

사실, 가이 제안처럼, 당신은 float 속성을 사용하려는거야 보다는 inline-block이 서로 다른 유형의 요소를 사용할 때 수직 정렬에 매우 까다롭기 때문에 서로 간의 공백을 사용합니다.

그러나 "피라미드"양식을 유지하려면 display: inline-block으로 설정된 다른 div에있는 버튼을 감싸서 전체 행이 현재 상위 div에 가운데 놓 이길 원할 것입니다. 이 예에서와 같이

: http://jsfiddle.net/syd8L/ 당신이 display: inline-block이

Answer 2

HTML 요소 사이의 공백을 제거하십시오. 그러나 display: inline-block;을 사용해야하는 경우는 아닙니다. 분석 this example. 대신 float을 사용할 수 있습니다. 그러면 HTML 요소 사이의 공백에 대해 걱정할 필요가 없습니다.

Answer 3

가장 쉬운 방법은 다음과 같이 첫 번째 행의 버튼에 약간의 상대 위치를 추가하는 것입니다 :

http://jsfiddle.net/ADLrh/1/

Answer 4

, 당신은 또한 vertical-align: top을 추가해야합니다.

참조 : 일을 명확히하기위한http://jsfiddle.net/thirtydot/ADLrh/2/