css - 需要帮助确定如何使用 CSS 定位此元素

Question

我正在尝试设置一些我无法控制的 html 样式。所见即所得。我需要做的是:

1. 让文字不在图片下方换行。
2. 控制文本的垂直位置。我试图将它大致定位在图像的水平中心线上。
3. 文本不能固定宽度(但是图像可以并且是固定宽度)。

我尝试过display: table、 float 文本元素和绝对定位文本，但它们都有不同的问题。感谢您提供任何进一步的想法。

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> , 以确保它们会彼此相邻 float ，并且图像下方不会有文字。

尝试这样的事情: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;
}

您也可以绝对定位跨度并设置 position:relative在 h1 上, 但我尽量避免绝对定位。

演示: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;
}