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 Hello：

 Hello              
Bye

缩小第二列的大小没有意义（因为我真的希望它是“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。如果您使用它，您的建议解决方案应该工作。否则，您将需要额外的标记级别。

请记住，宽度的默认值是应用于内容而不是边框，因此当蓝图给出宽度并给出填充时，填充添加到宽度，这是不好的。 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，这样你就不会遇到问题。

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

.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>

用蓝图css填充问题

3 个答案: