0

我是新来的 HTML/CSS，所以如果我对这个问题非常愚蠢，请原谅我。我一直在寻找答案无济于事，我终于认输并问...

我在使用浮动的容器中并排有两个 div 框。那里没有问题（我希望）。我希望再次拆分右侧的 div 框。我以为这不是问题，结果我错了。我只是无法将包含列表 (.includebox) 放在它的合作伙伴旁边 .helpbox2 中的排除列表 (.excludebox)

我已经剪切并粘贴了我认为相关的代码，但我总是可以添加更多。这个问题在 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

4

2 回答 2

0

你错过了 l on.includebox

编辑 2

这是简化的相同代码，以我会做的方式。

  • 去掉.marginsdiv，没必要
  • 重构您的 CSS，以便您使div第二个框中的所有样式都相同，并做出唯一的区别，即一个正确浮动
  • 将 CSS 规则分散到单独的行中，如果规则只有一个属性，则仅将其设置为一行
  • 删除position:relativeand the topand right's - 再次，不必要
  • 我希望这会有所帮助:)

编辑 您也不需要任何样式，因为它们什么都不做（除非您因为我在您的示例中看不到的原因而拥有它们）

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

还

  • 尝试将每个 CSS 规则分隔到一个新行上，这样会更容易阅读
  • 当您使用 Stack Overflow 时，人们确实经常使用 JSFiddle 来展示他们的问题。我用你的代码来帮助我，看这里
  • 尝试用破折号分隔你的元素，但总是小写，例如.inside-box
  • 欢迎来到堆栈溢出 :)
于 2013-06-27T09:12:26.073 回答
0

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

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

于 2013-06-27T09:15:09.297 回答