Question

我试图在两个图像下显示两个内联文本标签，但由于某种原因我无法弄明白。图像浮动到右边（正如它们应该的那样），当我试图浮动文本时希望它在两个图像下面对齐，这种情况不会发生。

我还尝试了一个单独的容器用于标签文本，并且对齐图像下的文本，但是文本没有均匀地分布在两个图像下面，正如我所期望的那样，因为它们在各自的图像中容器

此时我已尝试过一切。我不确定文本在其父div中的跨度是什么。现在，span＃past-label向右浮动，关闭但不完全。

我希望有人有答案。

<article id="issue-wrapper">
    <div id="issue-container">
        <h5><span style="color: #ffffff;">First issue</span>  Fall 2010</h5>
        <h3>Heading</h3>
        <h6>Sub Heading</h6>
    </div><!----------issue container end---------->
    <div id="issues">
        <div id="past-cover"><a href="issues/sample-issue.pdf"><img src="image" alt="alt text" /></a>
            <span id="past-label">PDF</span>
        </div>
        <div id="past-cover"><a href="issues/sample-issue.swf"><img src="image" alt="alt text" /></a>
            <span id="past-label">FLASH</span>
        </div>
        <div id="past-cover-mobile"><a href="issues/sample-issue.pdf"><img src="image" alt="alt text" /></a>
            <span id="past-label">PDF</span>
        </div>
    </div><!----------issue covers end---------->
</article><!----------issue wrapper end---------->

<style type="text/css">
    #issue-wrapper {
        background-color:red;
        height:auto;
        padding:30px;
        display:table;
        width:100%;
    }
    #issue-container {
        width:30%;
        height:auto;
        background-color:gray;
        left:0px;
        display:table-cell;
        vertical-align:middle;
    }
    #issue-covers {
        background-color:orange;
        width:auto;
        height:auto;
        margin:0px;
    }

    #past-cover img {
        float:right;
    }

    #past-cover-mobile img {
        float:right;
        display:none;
    }

    #past-label {
        background-color:blue;
        margin:0px;
        width:auto;
        display:inline;
        float:right;

    }

    h5, h3, h6 {
        width:100%;
        margin:0px;
        font-size:2em;
    }
</style>

Answer 1

浮动您的mail.header[:from].formatted元素，而不是图像。然后将#past-cover设置为<span>

JSFiddle：http://jsfiddle.net/gea58xd8/1

display:block

有没有更好的方法在图像下显示内嵌文字？

1 个答案: