html - 将样式作为显示 block 后不起作用

Question

在 html 设计中添加显示作为内联 block 后， Logo 和文本也不会显示在一行中

.logo img {
    border-width: 0;
    height: auto;
    max-width: 100%;
    vertical-align: left;
}
.logo-text {
    clear: both;
    display: inline-block;
    overflow: hidden;
}

<div class="logo">
   			<img src="images/logo.png"/>
		</div>
		<div class="logo-text">
   			<h1>Tagore English School</h1>
			<h1>New Millennium High School</h1>
			<h3>"IMPARTING CONCRETE EDUCATION IS OUR MOTTO"</h3>
		</div>

Answer 1

您还需要制作 logo div inline-block:

.logo {
 display:inline-block;
 }

.logo {
  display: inline-block;
}
.logo img {
  border-width: 0;
  height: auto;
  max-width: 100%;
  vertical-align: left;
}
.logo-text {
  clear: both;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

<div class="logo">
  <img src="http://lorempixel.com/output/food-q-c-50-50-7.jpg" />
</div>
<div class="logo-text">
  <h1>Tagore English School</h1>
  <h1>New Millennium High School</h1>
  <h3>"IMPARTING CONCRETE EDUCATION IS OUR MOTTO"</h3>
</div>