html - 我需要3个div才能实现吗？

Closed. This question needs details or clarity。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。
                        
                        5年前关闭。
                                                                                            
                
        
我想在CSS中实现类似的功能（请参见下图）。

我打算这样做的方法是创建3个DIV：红色1个和蓝色1个（两个像素都有一个像素空间），然后将它们包装在第3个容器中（以简化放置）。

有一个更好的方法吗？

谢谢，

最佳答案

您对主要问题的简短回答是-不。

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

我会做这样的事情：


建立一个父包装
浮动左项目（新风格）
在父包装内的文本猫和狗


的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

关于html - 我需要3个div才能实现吗？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24723022/