Question

我试图在标题的每一侧添加一张树的图片，但是我无法弄清楚如何正确地将图像定位到它们位于导航栏上方并位于左右两侧的位置我的标题

这个jsfiddle显示它比片段好一点。 https://jsfiddle.net/1qghboyh/

＆＃13;

* {
	margin: 0px;
	padding: 0px;
}

header {
	padding: 1em;
	color: white;
	background-color: #323241;
	clear: left;
	text-align: center;
}

footer {
	background-color: #339966;
	-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	padding: 1em;
	color: white;
	background-color: #323241;
	clear: left;
	text-align: center;
}

.initials {
	float: left;
	opacity: .25;
}

.tree1 {
	float: left;
	width: 100px;
	height: 100px;
}

.tree2 {
	float: right;
	width: 100px;
	height: 100px;
}

.navigation-bar {
	-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
	height: 3.2em;
	background: #339966;
	text-align: center;
	border-top: 2px solid;
	border-bottom: 2px solid;
}

.navigation-bar ul {
	display: inline-block;
	list-style-type: none;
}

.navigation-bar li {
	display: inline;
}

.navigation-bar li a {
	color: white;
	padding: 0px 30px;
	margin: 1em 0 0 -2px;
	text-decoration: none;
	float: left;
	height: 1.2em;
	line-height: 1.2em;
}

.navigation-bar li a.active{
	color: #111;
}

.navigation-bar li a:hover, a:focus {
	color: #111;
}

.columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	width: 70%;
    margin: auto;
}

.div1  {
	width: 100%;
	padding: 10px;
	border-right: 2px solid;
	border-left: 2px solid;
	margin: 0;
	background-color: white;
}

＆＃13;

<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<link rel="stylesheet" href="settings.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #323241">
<header>
	<div class="initials">#2 - C.C.</div>
	<img src="tree.jpg" class="tree1">
	<h1>Landscaping Company</h1>
	<img src="tree.jpg" class="tree2">
</header>
<div class="navigation-bar">
	<div id="navigation-container">
		<ul>
			<li><a class="active" href="home.html">Home</a></li>
			<li><a href="gallery.html">Gallery</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
</div>
<br>
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<div class="div1">
<div class="columns">
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>
<br>
<footer>Copyright © Landscaping Company</footer>
</body>
</html>

＆＃13;

Answer 1

您可以使用以下结果：

<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>

更正和解释

您的图片只是明显位于<header>容器内。这真的限制了你实际可以用它们做什么，所以我建议你总是将它们包装起来。将它们移动到各自的容器中。
将图像移动到容器后，我通过将它们设置为<div>来清除display: inline-block的块级行为。然后我将float属性分别转移到了每个属性。
<h1>标记有两个来自 bootstrap.css 的CSS属性，它们覆盖了边距的 normalize.css 设置。我再次修改它为.67ems，图像与标题完美匹配。
第二个图像位于<h1>标记下方，因此它被标题向下推，因为它具有块级行为。小心元素的布局以避免这些问题。仅供参考; （摘自MDN Re; Block-level elements）：

浏览器通常在元素之前和之后使用换行符显示块级元素。您可以将它们视为一堆盒子。

现在，如果你真正想要的是这个：将代码修改为：

<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>

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

div#header-imgs, div#header-imgs > h1, div#header-imgs, div#header-imgs > div { display: inline-block; }

第二种形式因以下原因而起作用：

您将所有元素包装在一个容器中，它们在DOM流中按正确顺序排列（img 1在标题之前，标题符号在img 2之前，你可以猜到最后一个）。
删除浮动会将图像返回到DOM Flow。同样只是FYI（再次），如果浮动元素是其父容器的唯一子元素，那么这将折叠所述父元素。如果你不得不在这里检查一下破坏了整个项目（例如，HTML设计的字母）的布局，这会导致可怕的头痛。
display: inline-block将所有三个元素堆叠在同一级别，并且它们将保持阻止行为，让您与它们进行奇迹（例如，上下边距）。

Answer 2

因为树实际上不是＆＃34;内容＆＃34;更多的装饰我会用CSS将它设置为背景图像。任何屏幕阅读器等都不会被没有alt属性的无意义的图像标签所迷惑。

＆＃13;

h1::before, h1::after
{
  content:'';
  background-image: url(http://placekitten.com/g/100/100); /*use tree here*/
  width:100px;
  height: 100px;
  display:inline-block;
}

h1::before
{
  float:left;
}

h1::after
{
  float:right;
  clear:right;
}

h1
{ 
  text-align: center;
  height:100px;
  line-height:100px;
}

＆＃13;

<h1>Some Content</h1>

＆＃13;

Answer 3

您是否尝试将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>

Answer 4

将display:inline属性添加到header tag会给您预期的效果，请尝试使用此

h1
{
  display : inline;
}

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

4 个答案: