Question

我的.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;
}

Answer 1

你确定你加入了CSS吗？我没有看到它。是的...... CSS肯定没有加载。

Answer 2

它可能与坏标记有关。 //不是你如何评论html。 html评论如下：

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

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

只是我最初的想法。我会继续看。

我在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>

Answer 3

我看不到“包装”的结束div？鉴于它是破碎的HTML

，这可能是你的问题

尝试在#topwrapper .left {your styling here}

中使用此功能

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

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

3 个答案: