Question

我有这样的HTML：

<article>
    <header>
        <hgroup>
            <h1>Wk 25 </h1>
            <h2>(18-06 tot 24-06)</h2>          
        </hgroup>
        <p>Some info</p>
    </header>
    <table>
        <thead>
            <tr>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>
</article>

CSS（摘录）是这样的：

article {
    padding: 0;
    margin-bottom: 15px;
    overflow: auto;
}
article header {
    background: url('header.png') repeat-x bottom center;
    padding: 4px 10px;
    cursor: pointer;
}

article-element使用浏览器窗口调整大小。里面的表可以比article-element更宽，因此溢出：auto。但是：标题元素的宽度为100％，因此如果向右滚动，标题将变为不可见。

如果我给标题一个位置：绝对，我也需要给它一个固定的高度：不起作用，因为那里的高度取决于内容（变化）。

所以问题是，我希望它像现在一样呈现，除了当我向右滚动时标题保持可见。

Answer 1

一种解决方案是将表格包装在自己的<div>中，与<header>分开，并使用自己的一组滚动条：

<article>
  <header><!-- ... --></header>

  <div style="overflow:auto">
    <table><!-- ... --></table>
  </div>
</article>

这样，标题似乎保持不变，但表格仍然可以左右滚动。

Answer 2

如果我理解正确，解决方案应该是将float:right放在标题中。

另一件事：您不能简单地将相对（％）值赋予div的高度。有一种方法，但我相信这是从它的父div继承该属性的时候。

Answer 3

如果您希望标题左右和上/下保持在同一位置，但不想在出现的位置进行硬编码，您可以尝试进行相对定位的潜水，将其放置在您想要的位置，以及然后在那里放一个固定的div。只要你没有设置它的上/左/下/右，div应该保持在它的父亲的0,0。

标题在固定的地方

3 个答案: