1

我现在正在做一个项目，无法让我的内容区域居中。我相信这是由于在我的浏览器中检查时主要的#content div 没有高度。我在#content 中的CSS 中分配了高度，但是这个div 似乎没有保留分配的属性。

这是包含#content div的HTML片段：

<div id="content">
    <div id="mainbox">
        <h1>title</h1>
        <h3>title</h3>
        <p>text</p>
        <ul>
            <li>Vivamus vestibulum nulla nec ante.</li>
            <li>Praesent placerat risus quis eros.</li>
        </ul>
    </div>
    <div id="relatedbox">
        <h1>Related</h1>
        <p>text</p>
    </div>
</div>

那么压缩后的 CSS 代码是：

#content {
    height: 500px;
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}
#content #relatedbox {
    width: 200px;
    font-size: 10pt;
    background-color: white;
    margin: 1em 0.5em 1em;
    border: 3px solid #00824c;
    float: left;
}

我已经尝试了很多东西，包括“位置：相对”（和绝对），这看起来像是许多其他类似问题的解决方案。但是不能解决我的问题。框呈现右侧，但粘在 div 的左侧。

提前感谢您的任何想法或帮助！

编辑（解决方案）：我似乎找到了解决方案，尽管我不确定它是否是最好的。在我的 HTML 中，我实际上只是将样式添加到 div 本身，然后它就将其拾取。我可以清除 #content div 中的所有 CSS 代码，但由于其他一些依赖项，我需要保留 #content id。再次感谢大家的帮助！修复它的代码： <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

4

5 回答 5

0

尝试添加overflow: hidden;到您的#content 样式。

于 2012-04-18T01:33:31.100 回答
0

我发现有时当我的 div 无法保持其高度时，我可以使用max-heightandmin-height来解决问题。

于 2012-04-18T01:34:54.293 回答
0

将 CSS 从文件直接移动到 div，如：<div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

于 2012-04-18T12:42:49.533 回答
0

如果您使用的是 IE，请在<html>标签前添加以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2012-04-18T02:01:33.297 回答
0

如果显示是inline，我发现它忽略了width。我将其更改为inline-block并且它似乎有效。

于 2013-06-09T23:42:12.620 回答