在我的H1文本旁邊放置一張圖片，無論文本的寬度如何

正如您在下面的圖片中看到的，我在我的H1文本的頭部放置了一個箭頭圖像。我是通過打右邊和右邊的邊距來做到這一點的。它正在工作，但問題是，如果我修改H1文本，那麼我將不得不再次使用邊距。有沒有辦法將箭頭放在H1文本的末尾，而不管文本的寬度是多少？非常感謝，在我的H1文本旁邊放置一張圖片，無論文本的寬度如何

enter image description here

<div class="block"> 
    <h1><span>H1 HEADER EN UIUIUIU MOTS</span> KKJKJJKJJKJKJdJKJJK</h1><img class="arrow" src="images/arrow-down.png" alt="arrow"> 
    </div> 
    <div class="block clear fish shadow"> 
</div>

CSS：

.block { 
    display: block; 
    clear: both; 
    box-sizing: border-box; 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 980px; 
} 

.arrow{ 
margin-right: 290px; 
float: right; 
margin-top: -45px; 

}

來源

2013-09-25 Greg

作爲替代，如果圖像是文字後直接，你可以使用一個僞 - 元素（：後）

h1:after { 
    position:absolute; 
    content:""; 
    width:50px; 
    height: inherit; 
    background-image: url(path_to/images/arrow-down.png); 
    background-repeat:no-repeat; 
    background-position:center; 
    margin-left: 10px; 
}

Codepen Example

來源

2013-09-25 20:30:58

你能不能把圖像中的H1的背景，使用background-position，將其調整到正確的？

Codepen Example

來源

2013-09-25 20:27:24

特別是：選擇器不工作在IE <7和IE8中需要特殊的文檔類型。 –

由於圖像你使用看起來像它的用於裝飾目的，我會用在h1一個background相反，它的位置在最右邊，並使用padding-right從推圖片上移開h1。因此，例如，嘗試：

CSS：

h1 { 
    background: url(images/arrow-down.png) no-repeat right center; 
    padding-right: 40px; /* tweak this */ 
}

Codepen example

至於那些誰正在使用的:after僞選擇建議，我會強烈建議不要這麼做，因爲：is not great on older IE browsers後（加這對於簡單的任務來說是一個不必要的複雜解決方案）。

來源

2013-09-25 20:28:27

-1

你可以給H1標籤類，並使用CSS選擇器「後」：

http://www.w3schools.com/cssref/sel_after.asp

來源

2013-09-25 20:29:54

你可以使用CSS僞元素:after(only for iE8 and +)：

HTML：

<h1>Hi there !</h1>

而且你CSS代碼（假設你的形象是50px * 50px）：

h1 { 
    background: #eee; 
    height: 50px; 
    line-height: 50px; 
    padding-right: 50px; 
    position: relative; 
    width: 300px; 
} 

h1:after { 
    background: url('images/arrow-down.png') bottom right no-repeat; 
    content: ''; 
    display: block; 
    height: 50px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
}

的H1padding-right必須等於你的形象CSSwidth。

或者乾脆使用：

h1 { 
     background: url('images/arrow-down.png') bottom right no-repeat; 
     padding-right: 50px; 
    }

來源

2013-09-25 20:33:38 deformhead

你也可以解決這個問題有一些jQuery的。

$(document).ready(function(){ 

    arrowMargin(); 
    function arrowMargin() { 
     $('.block img').css('margin-left', $('.block h1').width()); 
    } 

    $(window).resize(function(){ 
     arrowMargin(); 
    }); 

});

您必須在css中刪除您的margin-right。

問候蒂莫西斯

來源

2013-09-25 20:39:49

在我的H1文本旁邊放置一張圖片，無論文本的寬度如何

回答

相關問題