설명이있는 인라인 사진

Question

설명과 그림만으로 사진을 인라인으로 만들 필요가 있습니다. div 블록을 사용하여 2 개의 그림을 인라인으로 만드는 것은 괜찮 았습니다 : 인라인,하지만 첫 번째 그림에 desctiption을 추가하면 인라인을 할 수 없었습니다. 스크린 샷에서 볼 수 있듯이 첫 번째 div는 폭이 넓습니다. 여백 : 0 및 너비 고정) 인라인 만드는 방법?

https://dl.dropboxusercontent.com/u/16415767/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-10-13%2015.30.13.png https://dl.dropboxusercontent.com/u/16415767/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-10-13%2015.30.56.png

Answer 1

귀하의 p 스타일 display: block있다. 그것은 단락에 대한 표준, 브라우저 기본 스타일입니다.

이 방법은 항상 100% width을 차지하지만 width이 display: block 요소에 명시 적으로 설정된 경우 나머지 공간은 자동 margin으로 채워집니다.

해결책은 p을 display: inline-block으로 설정하는 것입니다.

---

정렬에 문제가있는 경우 플로팅 요소를 사용해보세요.

CSS 플로트 - http://www.w3schools.com/css/css_float.asp