Question

我的HTML包含2个水平对齐<tables>，下方有<h1>。 <h1>元素虽然没有正确呈现;它出现在表格的右边而不是它们之下。我怎样才能让它出现在表格下面？

和HTML供参考：

<div class="horizontal-div-container">
    <div>
        <table>
            <tbody>
                <tr>
                    <th >Panel ID:</th><th>100721651</th>
                </tr>

                <tr>
                    <th >RFI Points:</th><th>0</th>
                </tr>
            </tbody>
        </table> 
    </div>

    <div>
        <table>
            <tbody>
                <tr>
                    <th >Panel ID:</th><th>100721651</th>
                </tr>

                <tr>
                    <th >RFI Points:</th><th>0</th>
                </tr>
            </tbody>
        </table> 
    </div>
</div>

<h1>PANEL CONFIGURATION</h1>

.horizontal-div-container div {
    clear: none;
    float: left;
    padding: 5px;
}

Answer 1

您需要在css文件中再创建一个css标记，即h1 {clear：both}。您可以在css中添加此代码，在表格下添加元素apper。

Answer 2

在你的CSS中加上这个，

h1 { clear: both; }

Answer 3

您需要在h1元素上设置clear: both：

http://jsfiddle.net/w3LWC/2/

.horizontal-div-container div {
    clear: none;
    float: left;
    padding: 5px;
}
h1{
    clear: both;
}

Answer 4

很简单。您只需将clear:left;应用于<h1>。

由于您的风格.horizontal-div-container div有float:left;，因此无法向下移动。

以下是 WORKING DEMO

守则：

<h1 style="clear:left;">PANEL CONFIGURATION</h1>

Answer 5

这是JSBin

将CSS类设置为 h1 标记，将其声明为清除。

h1{
    clear: both;
}

Answer 6

您需要将clear:both添加到h1，试试下面的css

h1{clear:both;}

Answer 7

添加：

.horizontal-div-container {
    overflow: auto;
}

另见Clearing floats on QuirksMode。

如何让这个<h1>元素出现在表格下面而不是右边？</h1>

7 个答案: