为什么这个 div 没有继承正确的宽度样式答案

【问题标题】：Why is this div not inheriting the correct width style为什么这个 div 没有继承正确的宽度样式
【发布时间】：2012-08-26 18:33:17
【问题描述】：

我的 .left div 在 CSS 中将其宽度设置为 260px，但由于某种原因，它的计算样式显示为 980px（包装器的全宽），因此在页面上推出了另一个 fiv（div 右） .网站是here，我正在谈论的部分是“我是谁？”中的左侧 h2 和右侧段落文本部分。

HTML

<div id="topwrapper">
      <div class="left">
        <h2>I create films <span class="green">//</span></h2>
        <h2>I dance <span class="green">//</span></h2>
        <h2>I do silly things <span class="green">//</span></h2>
        <h2>I explore <span class="green">//</span></h2>
      </div>
      <div class="right">
        <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>

      </div>
    </div>

CSS

.left {
width:250px;
float:left;
text-align:right;
padding-right:50px;
}

.right {
    float:right;
    width:680px;
}

【问题讨论】：

你确定你包含了那个 CSS 吗？我没看到。是的.. CSS 肯定没有被加载。
@StephenSarcsamKamenar 是对的；那个 CSS 不在网站上。添加它使其工作。
@irrelephant 我将其作为答案发布，以便您将其标记为正确。
关于为什么它没有被加载的任何帮助？它在文件中正确链接，并且该文件肯定可以正常工作，因为我可以在 www.jamesperrett.co.uk/testsite/content.css 上正常访问它

标签： css width

【解决方案1】：

这可能与错误的标记有关。 // 不是你注释掉 html 的方式。 html 注释看起来像：

<!-- </span></h2>  -->

当你有错误的标记时，浏览器会做一些有趣的事情来匹配不匹配的元素，例如那些被“注释掉”的 span 元素。

只是我最初的想法。不过我会继续寻找。

我在http://w3schools.com 使用了javascript 编辑器，它对我有用。我喜欢在那个网站上编辑我的代码。这是我使用的代码。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.left {
width:250px;
float:left;
text-align:right;
padding-right:40px;
border:1px solid blue;
}

.right {
    float:right;
    width:250px;
border:1px solid green;
}

</style>

</head>
<body>

<div id="topwrapper">
      <div class="left">
        <h2>I create films <span class="green"></h2>
        <h2>I dance <span class="green"></h2>
        <h2>I do silly things <span class="green"></h2>
        <h2>I explore <span class="green"></h2>
      </div>
      <div class="right">
        <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>

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

</body>
</html>

【讨论】：

我不认为她试图注释掉她的内容在前端看起来像这样：我创建电影 // 我假设包装“//”的跨度用于颜色或某种样式
知道了。好的。我仍然会在 w3schools.com 上尝试一下

【解决方案2】：

我看不到“包装器”的关闭 div？鉴于 HTML 已损坏，这可能是您的问题

尝试在你的#topwrapper 中使用它。left {你的样式在这里}

我认为您的 CSS 也没有被加载？检查头部内的链接

【讨论】：

您是指我网站中的包装器，还是我在此处提供的代码中的顶部包装器？两者都关闭。
#topwrapper - 好像你也错过了你的 CSS？
链接在那里，当我导航到它时文件似乎很好。不知道为什么它没有加载。

【解决方案3】：

你确定你包含了那个 CSS 吗？我没看到。是的.. CSS 肯定没有被加载。

【讨论】：

我现在正在仔细检查，真的很困惑，因为它在标题中正确，而且文件（content.css）中的许多 CSS 似乎都在工作。感谢您的建议，我会继续寻找它为什么不起作用！
这很奇怪......我不知道o_o
@Francesca 在.left 块上方有一个额外的}。
啊，是的，谢谢！所以它被加载了，但被一个小角色扔掉了。感谢您的帮助。