h1
タグの上にタグを追加すると、不明なスペースがありp
ます。
ここにフィドルがあります
必要なものは下の画像にあります
を検討した後float:left
、実際のページで試してみましたが、それでも問題が発生します
これが新しいコードですfloat:left
浮かせて取り除くために使用されます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
}
問題:の誤った使用display:inline-block;
解決策display:inline-block;
:すべてのオカレンスを削除しvertical-align:top;
て与えます.thumb
float:left;
(ブロック要素を隣り合わせにする正しい方法)。
例: http: //jsfiddle.net/CKRNs/9/
thumb
これは、クラス (画像) に 100px の高さを指定したためです。その高さを削除するだけで修正されます。Fiddle を参照してください: http://jsfiddle.net/CKRNs/4/
編集:画像の横にタグが必要だと言ったように、次のようにタグとクラスの両方p
に追加します: http://jsfiddle.net/CKRNs/6/float: left
p
thumb
、、および定義にを追加しfloat:left;
ます。p
h1
.thumb
画像を設定する必要がありますfloat:left
。このデモを参照してください:http://jsfiddle.net/CKRNs/14/
.thumb{
display:inline-block;
height:100px;
float:left;
}
これは、画像が左に浮き、テキストが折り返されることを意味します
親指には絶対位置を使用します。h1タグとpタグにmargin-leftをつけます。http://jsfiddle.net/CKRNs/13/
h1, p{
margin: 0 0 0 60px;
}
.thumb{
position:absolute;
width:50px;
height:50px;
}