는 div의 인라인

Question

내 문제의 예를 들어이 펜을 참조하십시오 표시에 도착하지 못할 http://codepen.io/MarkRBM/pen/EmlJC

나는 어차피 지금 예약, 구독 말하는 3 명 div의이 접촉 헤더 및 단락과 함께 사업부 인라인 표시 할 수 . 나는 잠시 동안 노력하여 layout.com을 배웠다. 이것은 더 큰 프로젝트의 일부입니다. 그러나 그것을 플로트하려했으나, 그렇게하면 인라인 블록이있는 방법이 필요하다는 것을 알았습니다.

편집 나는 전체로 펜을 업데이트했습니다. 문제의 CSS는 866-894 줄에 있습니다. 당신이 그것을 이해하기에는 너무 많은 잘못 될 수 있습니다. 그렇다고해도 문제가되지 않는다면 나는 그것을 계속해서 막을 것입니다.

Answer 1

예, 물론입니다. 가능하고 올바른 길을 가고 있습니다. CSS의에서 불과 몇 오류 :

첫째, .locinfo는 inline-block이지만, 그것은하지 않은 내부 .loc이다 (그래서 기본적으로 block입니다) - 그래서뿐만 아니라 inline-block-.loc을 설정합니다.

또한 의 정의에서 inline-block 뒤에 세미콜론이 누락되어 해당 규칙이 무시되는 원인이됩니다.

결과를 원하는대로 정확히 알지 못하면 더 많은 수정이 필요한지 확실하지 않습니다. 그러나 그러한 변화는 적어도 거기에서 가장 많은 것을 얻는 것처럼 보입니다.

---

편집 :

.locinfo가 용기 자체로 단독이기 때문에 100 % 대신 49 %의 폭을 설정 응답에서 자세히 댓글한다. 핵심은이 요소의 너비가 인 컨테이너의 백분율 ()입니다. 컨테이너 (.loc)는 페이지의 49 %를 차지하므로, .locinfo에 49 %를 지정하면 페이지의 24 % 만 남게됩니다.

마찬가지로, .locbook을 32 %로 설정하십시오. 그런 다음 세 div는 컨테이너의 49 %에 나란히 위치합니다.

마지막으로, .locbook에 .loc 및 margin: 0에 vertical-align: top을 설정하고 멋지게 상단에 정렬 모든 것을 얻을 수 있습니다.

Answer 2

스팬으로 전환 해보십시오. Div는 기본적으로 {display : block}이며, span은 {display : inline}입니다. 블록 요소는 다른 요소와 같은 줄에 배치 할 수 없습니다. 그러나 인라인 요소의 너비는 지정할 수 없습니다.이 경우 div 또는 span 중 원하는 스타일을 선택하십시오 (실제로 중요하지 않음). {display : inline-block}

Answer 3

당신이 표시 한 후 세미콜론을 추가하는 것을 잊었다 : 인라인 블록 내 펜에서 일했다

.locbook{ 
    /*width: 49%;*/ 
    background-color: #3475b3; 
    display: inline-block; 
    vertical-align: top; 
}