用蓝图css填充问题

Question

以下标记使用blueprintcss看起来很好：

<div class="container">
  <div class="span-12" style="background-color : cyan">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

你会得到两个占一半大小的列，这很巧妙：

Hello              Bye                     

现在，"Hello"文本离容器div的边缘太近了，所以您想添加一点填充，对吧？

<div class="container">
  <div class="span-12" style="background-color : cyan; padding-left : 5px">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

但显然它不起作用，你最终会在下的"再见"栏"你好："

 Hello              
Bye

减少第二列的大小是没有意义的（因为I真的希望它是"12网格列宽"。

现在，添加另一个级别的标记是可行的，但它有必要吗？

<div class="container">
  <div class="span-12" style="background-color : cyan">
    <div style="padding-left : 5px">Hello</div>
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

我是不是错过了什么？

我在这里缺少什么？

Answer 1

我怀疑您没有使用box-sizing: border-box。如果你使用它，你建议的解决方案应该有效。否则，您将需要额外级别的标记。

记住，宽度的默认值是应用于内容，而不是边框，所以当Blueprint给出宽度并且您给出填充时，填充被添加到宽度中，这很糟糕。box-sizing: border-box指令修复了此问题。

Answer 2

根据您想要的结果，可能会将border-left: 5px添加到此特定的.container中。如果您有一个纯色，或者一个具有rgba()透明度的纯色，它应该不会对布局的其余部分产生任何影响。

.container
{
  /* cyan is the test color */
  background-color: cyan;
  border-left: 5px;
  border-color: cyan;
  border-style: solid;
}

Blueprint做得很聪明，而且比我的建议测试得更好——如果不成功，我会使用内部元素来获得最佳的跨浏览器（旧IE）结果。

Answer 3

有必要在div中添加另一个div，这样就永远不会遇到问题。

我遵循添加内部div的标准-类填充

.padding { padding:1.5em; }

所以在你的代码中，这看起来像这样：

 <div class="container">
    <div class="span-12" style="background-color : cyan">
      <div class="padding">
           Hello
      </div>
    </div>
    <div class="span-12 last" style="background-color : green">
       Bye
    </div>
</div>