Question

我有这个JSFiddle：Click here

<table class="findus-main-table">
    <tr>
        <td>
            <img class="static-map" onClick="swap();" id="static-map-id" />
        </td>
        <td style="text-align: center; vertical-align:bottom; position: relative;">
            <span style="font-size: 22px; font-weight: bold;">The address I want here</span>
            <!-- the inner table for location and distance and phone number -->
            <table style="text-align:left;" cellspacing="10">
                <tr>
                    <td style="vertical-align:top">
                        <div>
                            <div>Phone: (613)-123-1234</div>
                            <div>Distance: 0.123km</div>
                        </div>
                    </td>
                    <td>
                        <div><b>Store Hours</b>
                        </div>
                        <div>Mon - Fri: 8am - 2am</div>
                        <div>Sat & Sun: 10am - 12am</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我想要的是将地址置于顶部，而电话号码和小时保持在最底层。我尝试使用绝对但它包装了我真正不想要的地址文本。

我该怎么做？

Answer 1

除了你不应该使用内联样式之外，这是你正在寻找的吗？

<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">

FIDDLE

Answer 2

而不是使用position:absolute女巫应该是任何人应该尝试的最后一件事，我使用vertical-align:top 这是一个fiddle。这是我的css：

.address{
    text-align:center;
    font-size:22px;
    text-align: center;
    font-size: 22px;
    height: 78px;
    padding: 0;
    vertical-align: top;
}

将文本放在单元格内

2 个答案: