我正在努力通过 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;
}
我想用它添加背景图像文件,我做错了什么?
最佳答案
您可以这样做,为两个内容分配一些容器 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;
}
关于html - 如何将 Logo 和文字并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23960011/