帶h1標籤的額外空間

我在p標籤上添加h1標籤時存在未知空間。帶h1標籤的額外空間

這裏是fiddle

我需要的是在這裏下面的圖片中

enter image description here

考慮float:left後，我試圖在我真正的頁面，但它仍然給問題

這是新代碼float:left

Fiddle with float

來源

2013-02-26 Sowmya

這就是小提琴不是如何對齊對我來說：http://uploader.pieterhordijk.com/download/39，HTTP：//uploader.pieterhordijk。com/download/40 – PeeHaa 2013-02-26 10:32:33

您是否在談論拇指所造成的差距？是[this]（http://jsfiddle.net/CKRNs/3/）更像嗎？否則我真的不明白.. – George 2013-02-26 10:33:17

@PeeHaa小提琴有問題的說法。我需要像我在圖像中顯示的那樣輸出。 – Sowmya 2013-02-26 10:33:17

用於浮動和刪除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  
    }

Demo

來源

2013-02-26 10:36:07

請看看@編輯的問題。我加浮動：左，但仍是問題http://jsfiddle.net/CKRNs/19/ – Sowmya 2013-02-26 10:58:34

這樣http://jsfiddle.net/CKRNs/22/ – 2013-02-26 11:01:26

但什麼都ü在這種變化？從H1刪除浮動?? – Sowmya 2013-02-26 11:02:30

那是因爲你已經給你thumb類（這是你的形象）的100px的高度。簡單地去除高度將修復它，看到小提琴：http://jsfiddle.net/CKRNs/4/

編輯：正如你也說你想要的p標籤旁邊的圖像，添加float: left到兩個p標籤和thumb類，像這樣：http://jsfiddle.net/CKRNs/6/

來源

2013-02-26 10:33:23 mattytommo

我需要p標籤開始向右h1標籤，它是如何連接的圖像 – Sowmya 2013-02-26 10:34:10

@Sowmya不好意思啊所示下面，看到第二個鏈接在我編輯的答案。 – mattytommo 2013-02-26 10:36:07

現在有效。 :) – Sowmya 2013-02-26 10:40:37

添加float:left;到p，h1和.thumb定義。

來源

2013-02-26 10:33:46

你需要設置你的圖像float:left。看到這個演示：http://jsfiddle.net/CKRNs/14/

來源

2013-02-26 10:35:54 otinanai

.thumb{ 
    display:inline-block; 
    height:100px; 
     float:left; 
}

這意味着圖像將左浮動，並允許文本換

來源

2013-02-26 10:36:06

問題：不正確的使用display:inline-block;

解的：刪除所有display:inline-block;和vertical-align:top; OCCURENCES並給.thumbfloat:left;（對準旁邊的海誓山盟塊元件的正確的方法）。

例：http://jsfiddle.net/CKRNs/9/

來源

2013-02-26 10:36:33

+1 ..不能自己更改 – George 2013-02-26 10:38:09

@ F4r-20謝謝，改變它。 – 2013-02-26 10:38:49

您也可能想從拇指上移除高度，以使文字在圖像上流動。 – Achrome 2013-02-26 10:38:51

我會使用絕對拇指位置。並將餘量留給h1和p標籤。 http://jsfiddle.net/CKRNs/13/

h1, p{ 
margin: 0 0 0 60px; 
} 

.thumb{ 
    position:absolute; 
    width:50px; 
    height:50px; 
}

來源

2013-02-26 10:41:16

帶h1標籤的額外空間

回答

相關問題