0

I have HTML with 2 horizontally aligned <tables> with a <h1> underneath. The <h1> element isn't rendering correctly though; it's appearing to the right of the tables instead of under them. How can I get it to appear under the tables?

This is the JSFiddle: http://jsfiddle.net/w3LWC/1/

and the HTML for reference:

<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;
}
4

7 回答 7

1

您需要在您的 css 文件中再创建一个 css 标签，即 h1{clear:both}。您可以将此代码添加到您的 css 中，并将您的元素添加到表格下方。

于 2013-08-02T10:54:33.110 回答
0

在你的CSS中添加这个，

h1 { clear: both; }

于 2013-07-31T10:40:49.533 回答
0

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

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

.horizontal-div-container div {
    clear: none;
    float: left;
    padding: 5px;
}
h1{
    clear: both;
}
于 2013-07-31T10:41:23.187 回答
0

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

因为你的风格.horizontal-div-container div有一个float:left;阻止它向下移动的东西。

这是工作演示

编码：

<h1 style="clear:left;">PANEL CONFIGURATION</h1>
于 2013-07-31T10:42:39.307 回答
0

这是JSBin

将 CSS 类设置为h1标签，将其声明为清晰。

h1{
    clear: both;
}
于 2013-07-31T10:42:57.617 回答
0

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

h1{clear:both;}
于 2013-07-31T10:43:06.520 回答
0

添加这个：

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

另请参阅在 QuirksMode 上清除浮动。

于 2013-07-31T10:43:06.850 回答