Question

我是新来的HTML / CSS，所以请原谅我，如果我对这个问题非常不满意的话。我找不到答案，我终于承认失败并问...

我在一个使用浮动的容器中并排放置两个div盒。没有问题（我希望）。我希望再次拆分右手div盒。我认为这不是问题，原来我错了。我只是无法将包含列表（.includebox）放在它旁边的合作伙伴排除列表（.excludebox）里面.helpbox2

我已经剪切并粘贴了我认为相关的代码，但我总能添加更多。问题出现在www.exceptionalcvs.co.uk/help_cv_basics.html，除非我再次使用它 - 我会尽力避免。

HTML

<body>
  <div class="container">
    <div class="margins">
      <div class="helpbox1">
        <h2>1. Introduction</h2>
        </p><p>
        <p>text here</p>
      </div>
      <div class="helpbox2">
        <h2>2. What do I put in my CV&#63;</h2>
        <p></p>
        <div class="includebox">Include list
          <ul>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="excludebox">Exclude list
          <ul>
            <li>Passport number</li>
            <li>Driving license number</li>
            <li>Social Security number</li>
            <li></li>
            <li>Martial status</li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}

.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}

如果代码有点混乱，请道歉。问题的形象在这里： http://www.exceptionalcvs.co.uk/img/div_problem.jpg

Answer 1

你错过了.includebox

上的l

修改2

Here's the same code simplified，就像我做的那样。

删除.margins div，不必要的
重构你的CSS，这样你在第二个方框中所有div的样式都是相同的，并且唯一的区别是一个漂浮在右边
将CSS规则传播到单独的行上，只有规则为一行（如果它具有单个属性）
再次删除position:relative以及top和right -
我希望有帮助：）

修改你也不需要像你所拥有的那样接近任何样式，这些都可以随着他们什么都不做（除非你有他们因为我在你的例子中看不到的原因）

position:relative;left:0px;right:0px;;margin:0px auto;

同时

尝试将每个CSS规则分隔到一个新行上，这样可以更容易阅读

当您使用Stack Overflow时，人们经常使用JSFiddle来演示他们的问题。我用你的代码来帮助我，see here

尝试用破折号分隔元素，但总是小写，例如.inside-box

欢迎使用Stack Overflow：）

Answer 2

您的代码很好，但是您错过了css文件中.includebox上的“L”。

以下是工作示例：http://jsfiddle.net/SVEh9/

CSS / HTML浮动div继承父的宽度而没有响应定义的宽度，有什么不对？

2 个答案: