2

我的 .left div 在 CSS 中将其宽度设置为 260px，但由于某种原因，它的计算样式出现在 980px（包装器的全宽），因此在页面上推出了另一个 fiv（div 右）。网站在这里，我正在谈论的部分是“我是谁？”中的左侧 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;
}
4

3 回答 3

1

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

于 2012-09-01T00:13:31.800 回答
0

这可能与错误的标记有关。// 不是你注释掉 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>
于 2012-09-01T00:10:24.390 回答
0

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

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

我不认为你的 CSS 也被加载了？检查头部内的链接

于 2012-09-01T00:10:54.700 回答