Question

我正在努力解决这个问题，我觉得这可能是一件非常简单的事情，因为我已经看了很久了。但在这里：

我有多个包含Wijmo HTML 5小部件的div。我基本上创建了一个仪表板，到目前为止一切都非常顺利。我有一个Top Div，其中包含一个全长小部件，下面有两个div将页面分成两半，其中包含多个小部件。现在我试图在底部添加最后一个div，它将像顶部div一样运行页面的整个范围，但每次我添加标签设计看起来像标题栏时，该标签的样式都从将页面分隔到最底部的两个div的顶部。我似乎无法弄清楚我需要改变什么来解决这个问题。

这是两张图片，显示添加标签之前和之后

之前：http://imgur.com/oiT2KId

之后：http://imgur.com/LpgJ4Jv

然后是一些css代码，

.header-bar
{
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #787878), color-stop(100%, #6d6d6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* IE10+ */
background: linear-gradient(top, #787878 0%, #6d6d6d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#787878', endColorstr='#6d6d6d', GradientType=0 ); /* IE6-9 */
box-shadow: 0 3px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
padding: 0.4em 0.4em;
text-shadow: 1px 1px 2px rgba(0,0,0,0.50);
margin-right: 0.4em;
font-family: "Segoe UI" , Segoe, Tahoma, Geneva, sans-serif;
}

HTML格式：

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

编辑：添加HTML代码以显示结构。

Answer 1

尝试在主体div之后添加div以清除。就像是。

<div id="mainbody">
        {...}
    </div>

<!-- Try adding this -->
<div style="clear: both;"></div>
<!-- End -->
    <div id="bottom-fullspan">
        <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
    </div>

当然，在样式表中创建一个清晰的类会更好，但这可以快速确定它是否是一个清算问题。

您还可以尝试为每个<div>元素添加边框，以查看页面上的每个div及其真实大小。

div { border: 1px solid black;}

DIV和<h3>标签发布样式问题</h3>

1 个答案: