p 태그 위에 h1 태그를 추가하면 알 수없는 공간이 있습니다. 여기 h1 태그가있는 추가 공간
, 내 실제 페이지에 그것을 시도 float:left을 고려하면 아래 이미지 여기에 필요한 것 fiddle
이지만 여전히 제공 문제
다음과 같은 새로운 코드가 있습니다.
당신이 당신의 thumb 클래스 (이미지가) 100 픽셀의 높이를 준 때문이다 Fiddle with float
이 플로트에 사용되는 포장 및 제거 할 수 display inline-block;
p {
width: 80%;
vertical-align: top; margin:0
}
h1{
font-size:14px;
margin:0;
vertical-align:top;
}
.thumb{
float:left;
height:100px
}
float:left. http://jsfiddle.net/CKRNs/4/
편집 : 간단하게 문제를 해결할 것 높이를 제거 바이올린을보고 당신은 또한 당신이 이미지 옆에, 그래서처럼 p 태그와 thumb 클래스 모두에 float: left을 추가 p 태그를 원하는 말했듯 : http://jsfiddle.net/CKRNs/6/
h1 태그 바로 아래에서 시작하려면 p 태그가 필요합니다. 첨부 된 이미지에 표시되는 방법은 – Sowmya
@Sowmya 아 죄송합니다. 두 번째 링크 참조 내 편집 된 답변. – mattytommo
네 이제 작동합니다. :) – Sowmya
p, h1 및정의에을 추가하십시오.
float:left 이미지를 설정해야합니다. 이 데모를 참조하십시오 이미지가 왼쪽으로 떠 http://jsfiddle.net/CKRNs/14/
.thumb{
display:inline-block;
height:100px;
float:left;
}
이것은 의미와 텍스트가
문제 : display:inline-block;
솔루션 잘못 사용하면 모든 display:inline-block; 및 vertical-align:top; 발행 수를 제거하고 제공 .thumbfloat:left; (서로 옆에 블록 요소를 정렬하는 올바른 방법).
I가 샘 절대 위치를 사용한다. 여백을 h1과 p 태그에 남겨 둡니다. http://jsfiddle.net/CKRNs/13/ 바이올린 나를 위해 정렬되지 방법
h1, p{
margin: 0 0 0 60px;
}
.thumb{
position:absolute;
width:50px;
height:50px;
}
: http://uploader.pieterhordijk.com/download/39, HTTP : //uploader.pieterhordijk합니다.com/download/40 – PeeHaa
엄지 손가락이 만드는 간격에 대해 이야기하고 있습니까? [this] (http://jsfiddle.net/CKRNs/3/)이 더 마음에 드십니까? 그렇지 않으면 나는 정말로 이해하지 못한다 .. – George
@ 피 haaa 피들 문제가 진술하고있다. 내가 이미지에서 보여준 것과 같은 결과가 필요합니다. – Sowmya