Html 如何在标题的每一侧放置图像？

我试图在标题的每一侧添加一棵树的图片，但是我不知道如何将图像正确定位到导航栏上方以及标题左右两侧的位置

这个jsfiddle比代码片段更好地展示了它。

*{
边际：0px；
填充：0px；
}
标题{
填充：1em；
颜色：白色；
背景色：#323241；
清除：左；
文本对齐：居中；
}
页脚{
背景色：#339966；
-网络工具包盒阴影：-1px 1px 15px 3px rgba（31,31,31,1）；
-莫兹盒阴影：-1px 1px 15px 3px rgba（31,31,31,1）；
盒影：-1px 1px 15px 3px rgba（31,31,31,1）；
填充：1em；
颜色：白色；
背景色：#323241；
清除：左；
文本对齐：居中；
}
.姓名首字母{
浮动：左；
不透明度：.25；
}
.树1{
浮动：左；
宽度：100px；
高度：100px；
}
.树2{
浮动：对；
宽度：100px；
高度：100px；
}
.导航栏{
-网络工具包盒阴影：-1px 1px 15px 3px rgba（31,31,31,1）；
-莫兹盒阴影：-1px 1px 15px 3px rgba（31,31,31,1）；
盒影：-1px 1px 15px 3px rgba（31,31,31,1）；
身高：3.2米；
背景:#339966；
文本对齐：居中；
边框顶部：2倍实心；
边框底部：2倍实心；
}
.导航栏{
显示：内联块；
列表样式类型：无；
}
.导航栏李{
显示：内联；
}
.导航栏LIA{
颜色：白色；
填充：0px 30px；
裕度：1米0-2倍；
文字装饰：无；
浮动：左；
高度：1.2米；
线高：1.2米；
}
.导航栏李a.激活{
颜色：#111；
}
.导航栏li a:悬停，a:聚焦{
颜色：#111；
}
.栏目{
-webkit列数：3；
-moz列数：3；
列数：3；
}
.carousel-inner>.item>img、.carousel-inner>.item>a>img{
宽度：70%；
保证金：自动；
}
.1分部{
宽度：100%；
填充：10px；
右边框：2倍实心；
左边框：2倍实心；
保证金：0；
背景色：白色；
}

#2-C.C。
园林公司












夏尼亚
查尼亚的气氛有点像佛罗伦萨和威尼斯

夏尼亚
查尼亚的气氛有点像佛罗伦萨和威尼斯

花
克里特岛科林巴里美丽的花朵

花
克里特岛科林巴里美丽的花朵

作为俄亥俄州东北部的景观设计师，铁杉景观自1981年以来一直在关注查格林山谷的客户及其财产。
我们的核心价值观：
每天都带着积极的态度
努力工作，积极投入，乐于助人，富有成效
在任何场合，对所有人都要公平和尊重

说到俄亥俄州东北部的住宅景观维护，我们有一个相当简单的任务。
我们的使命是团结人们建立积极的关系，改善生活。
这不仅包括我们伟大的客户，还包括我们每天都与之合作的优秀员工和供应商。如果我们没有改善你的生活，那么我们就没有履行我们的使命。
我们在景观行业的各个方面都有丰富的经验，通过满足您在以下领域的每一个需求，我们实现了我们的“一家公司……全面护理”理念：
住宅景观维护
景观设计/安装
植物保健

无论您是Chagrin Valley的新手、更换景观服务提供商，还是需要在现有帐户中添加服务，Hemlock景观都能为您提供便利

作为俄亥俄州东北部的景观设计师，铁杉景观自1981年以来一直在关注查格林山谷的客户及其财产。
我们的核心价值观：
每天都带着积极的态度
努力工作，积极投入，乐于助人，富有成效
在任何场合，对所有人都要公平和尊重

说到俄亥俄州东北部的住宅景观维护，我们有一个相当简单的任务。
我们的使命是团结人们建立积极的关系，改善生活。
这不仅包括我们伟大的客户，还包括我们每天都与之合作的优秀员工和供应商。如果我们没有改善你的生活，那么我们就没有履行我们的使命。
我们在景观行业的各个方面都有丰富的经验，通过满足您在以下领域的每一个需求，我们实现了我们的“一家公司……全面护理”理念：
住宅景观维护
景观设计/安装
植物保健

无论您是Chagrin Valley的新手、更换景观服务提供商，还是需要在现有帐户中添加服务，Hemlock景观都能为您提供便利



版权所有©园林绿化公司

您是否尝试过将

img

标记放入

h1

标记中，并从图像中移除浮动

<h1><img src=...>Landscaping Company<img src=...></h1>

园林公司

如果您真的想使用浮点，那么我发现在HTML中首先指定正确的浮点通常会产生所需的结果

<img src="tree.jpg" class="tree2">
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>

园林公司

对于一个结果，您可以使用：

<header>
  <div class="initials">#2 - C.C.</div>
  <div style="display: inline-block;float: left;">
    <img src="tree.jpg" class="tree1">
  </div>
  <div style="display: inline-block;float: right;">
    <img src="tree.jpg" class="tree2">
  </div>
  <h1 style="margin: .67em;">Landscaping Company</h1>
</header>

从图像中删除浮动，并添加以下CSS：

div#header imgs，div#header imgs>h1，div#header imgs，div#header imgs>div{
显示：内联块；
}

第二种形式之所以有效，是因为：

您将所有元素包装在一个容器中，使它们在DOM流中按正确的顺序排列（IMG1在头之前，头在IMG2之前，您可以猜到最后一个）

<header>
  <div class="initials">#2 - C.C.</div>
    <div id="header-imgs">
      <div>
        <img src="tree.jpg" class="tree1">
      </div>
      <h1>Landscaping Company</h1>
      <div>
        <img src="tree.jpg" class="tree2">
      </div>
  </div>
</header>

h1
{
  display : inline;
}