我需要3个div来实现吗？

Question

我想在CSS中实现类似的功能（见下图）。

我计划这样做的方法是创建3个DIV：红色和DIV（两个像素空间都是btw）并将它们包装在第3个容器中（以便于放置）。

有更好的方法吗？

谢谢，

Answer 1

不确定是否有更好的方法，但我想到的第一件事就是创建3个div，使用margin属性并且你会得到相同的结果。没有理由把任务弄得这么容易。

Answer 2

容器是否可供您使用。但是你需要至少2个DIV才能制定自己的计划。

您可以使用背景为蓝色且宽度为300像素的DIV（例如）和蓝色DIV上的DIV，背景为红色，宽度为160像素（例如）

Answer 3

对你的主要问题的简短回答是 - 否。

您可以通过近百种方式实现此结果。最佳实践取决于您使用这些元素所需的灵活性，以减少冗余。

我会做这样的事情：

• 构建一个父包装
• 浮动左项（Nouveau）
• Text Cats＆amp;父包装内的狗

HTML

<section class='advertising'>
  <span class='new'>> Nouveau</span>
  Cats &amp; Dogs
</section>

CSS

.advertising {
  width: 400px;
  line-height: 45px;
  color: #ffffff;
  background-color: #4DA6FF;
}

.advertising .new {
  background-color: #FF4000;
  display: inline-block;
  float: left;
  padding: 0px 7px;
  margin-right: 7px;
  border-right: 1px solid #ffffff; /* 1px border to the right */
}

活示例：

http://codepen.io/anon/pen/aoDKH