html - 创建具有两种不同颜色的页脚

Question

我正在尝试根据收到的设计创建页脚......

左边的背景颜色和右边的不一样:

我有以下标记:

<div class"wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

我的想法是 Content DIV，让 Logo 作为背景图像左对齐且不重复。

但后来我不知道如何在左侧和右侧创建不同的颜色......

而且我不确定我是否可以控制高度以使所有内容对齐。

内容 div 居中并且在图像上有橙色边框 ...

谢谢你，
米格尔

Answer 1

试试这个 http://codepen.io/nicknameless/pen/cblzB/

我使用了 CSS3，没有额外的标记。这应该适合你。我认为它可以清理干净，这只是一个快速概述，可以帮助您入门。

您提供的 HTML

<div class="wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}
div.wrapper {
  height: 40px;
  background: #850000;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  top: calc( 100px - 40px );
}
div.wrapper:before {
  background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
  content: " ";
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 10%;
}
div.content {
  left: calc( 10% + 100px );
  padding-left: 10px;
  bottom: 0;
  background-color: #C70000;
  display: block;
  height: 40px;
  position: absolute;
  width: calc( 100% - ( 10% + 100px ) );
}