css - 标题中的方案：标志、标语、图像等

Question

我想创建一个这样的模式：

我想知道是否更好地为徽标和口号创建一个容器。我也想知道是否更好地为电话图标、phone1、phone2 和 facebook 按钮创建一个容器。

你能帮帮我吗？

Answer 1

尝试这个;

HTML：

<div class="warranty">Warranty image goes here</div>
<div class="logo">LOGO Goes Here</div>
<div class="slogan">Slogan goes here</div>

CSS：

.logo{
    background: #4E41FE;
    color: #FFF;
    padding: 4px 4px;
    text-align: center;
    width: 50%;
    margin: 3px;
}
.slogan{
    background: #4E41FE;
    color: #FFF;
    padding: 4px 4px;
    text-align: center;
    width: 50%;
    margin: 3px;
}
.warranty{
    background: #4E41FE;
    color: #FFF;
    padding: 4px 4px;
    text-align: center;
    width: 40%;
    margin-top: 15px;
    float: right;
}

jsfiddle：http: //jsfiddle.net/v4GnU/