html - 如何将 Logo 和文字并排放置

Question

我正在努力通过 CSS 在 HTML header 上放置 Logo 和联系信息。这是我到目前为止所做的:

<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

您可以这样做，为两个内容分配一些容器 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

为两个容器添加宽度并使其 float :左，使用 % 使其响应

#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