Question

我很难通过CSS将HTML标题上的徽标和联系信息放在一边。这就是我到目前为止所做的：

<div id="Principal">
    <header>
        <img id="Logo" src="decoupe/logo.png" alt="logo" />
        <h2 id="Titre">ENGLISH | OFFRES D'EMPLOIS</h2>
        <div style="display:block;text-align:left"><img align="left" src="decoupe/tel.png" border="0">CONTACTEZ-NOUS<br>
        450.378.0413<br>
        1.800.567.1827</div>
   </header>

这里是CSS：

#Principal
{
    width:1000px;
    margin: auto;
    border: solid 1px;

}
#Logo
{
    display: inline-block;
    margin-left: 25px;
    margin-top: 25px;

}
#Titre
{
    display: inline-block;
    vertical-align: top;
    width: 75%;
    float: right;
    text-align: center;

}

由于我想用它添加背景图像文件，我做错了什么？

Answer 1

您的h2标签太宽，请尝试为联系信息留出一些空间：

 * {
    margin: 0;
    padding: 0;
}
#Principal {
    width:1000px;
    border: solid 1px;
}
#Logo {
    display: inline-block;
    margin-left: 25px;
    margin-top: 25px;
}
#Titre {
    display: inline-block;
    vertical-align: top;
    float: right;
    text-align: center;
}
#contact {
    width: 200px;
    height: 150px;
    display: inline-block;
}

JSFIDDLE

Answer 2

您可以这样做，为这两个内容分配一些容器ID

<强> HTML

   <header>
    <div id='left-content'>
        <img id="Logo" src="decoupe/logo.png" alt="logo" />
         <h2 id="Titre">ENGLISH | OFFRES D'EMPLOIS</h2>

    </div>
    <div id='right-content'>
        <img src="decoupe/tel.png" border="0"
        />
        <span id='img-content'>CONTACTEZ-NOUS
        <br/>450.378.0413

        <br/>1.800.567.1827
        </span>
    </div>
</header>

<强> CSS

为容器添加宽度并使其浮动：向左，使用％以使其响应

#Principal {
    width:1000px;
    margin: auto;
    border: solid 1px;
}
#left-content {
    width: 70%;
    display: inline-block;
    float: left;
}
#right-content {
    width: 30%;
    display: inline-block;
}
#right-content img {
 display: inline-block;
  float: left;
  width: 30%;
  height: auto;
}
#img-content {
    width: 60%;
    display: inline-block;
    float: left;
}
#Logo {
    display: inline-block;
    margin-left: 25px;
    margin-top: 25px;
    width:15%;
}
#Titre {
    display: inline-block;
    vertical-align: top;
    width: 75%;
    text-align: center;
}

Demo

如何将徽标和文本放在一边

2 个答案: