需要幫助確定如何定位這個元素與CSS

Question

我試圖樣式一些HTML，我沒有控制。所見即所得。我需要做的是：

1. 讓文字不包裹在圖像下。
2. 控制文字的垂直位置。我試圖將其大致沿圖像的水平中心線放置。
3. 文字不能固定寬度（圖像，但可以和是固定的寬度）。

我試過display: table，浮動文本元素和絕對定位文本，但他們都有不同的問題。感謝您的任何進一步的想法。

http://jsfiddle.net/6fjCX/3/（您可能需要收縮幀的寬度，看看效果）

img { 
    height: 66px; 
    width: 165px; 
    border: 1px solid black; 
} 
#title-text { 
    font-size: 32px; 
    line-height: 36px; 
} 

<h1 id="title-heading" class="pagetitle"> 
    <a href=""><img class="logo global custom" src="" alt=""></a>     
    <span id="title-text"> 
     <a href="">Installing Confluence 3.4 on a Windows 64 bit system</a> 
    </span> 
</h1> 

Answer 1

我設置這兩個元素的寬度以及包裝<h1>，以確保他們會漂浮在彼此旁邊，圖像下面不會有文字。

嘗試這樣：http://jsfiddle.net/6fjCX/5/

img { 
    height: 66px; 
    width: 165px; 
    border: 1px solid black; 
    background: red; 

    /* Float the image */ 
    float:left; 
} 
#title-text { 
    font-size: 28px; 

    /* Since the element comes after in the markup */ 
    float:right; 

    /* (h1 width) - (img width) - (#title-text left padding/margin) */ 
    width:420px; 
} 
#title-heading { 
    /* set to a width that works for you */ 
    width:600px; 
} 

你也可以完全定位跨度上h1設置position:relative，但我會盡量避免絕對定位可能時。

演示：http://jsfiddle.net/6fjCX/7/

img { 
    height: 66px; 
    width: 165px; 
    border: 1px solid black; 
    background: red; 
    float:left; 
} 
#title-text { 
    font-size: 28px; 
    position:absolute; 
    top:0; 

    /* (img width) + (span left padding) */ 
    left:175px; 
} 

#title-heading { 
    /* contain absolute positioned elements */ 
    position:relative; 
}