在将样式作为显示块后不起作用

Question

嗨，在html的设计中，添加了作为内联块的显示后，徽标和文本都没有在一行中显示。

​

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

​

Answer 2

这里有一些问题，clear:both;将清除.logo，还需要将display属性应用于两个div，因为它们本质上是块元素。

然后，您将需要使用浮动和边距定位您的标志。

另外，vertical-align接受垂直属性top, middle, bottom而不是水平属性left, center, right。

​

.logo {
  float: left;
  margin: 30px 30px 0 0;
}

.logo,
.logo-text {
  display: inline-block;
}

.logo img {
  border-width: 0;
  height: auto;
  max-width: 100%;
}

.logo-text {
  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 3

您必须使图像div显示inline.so使徽标div内联显示，以显示这两样东西。

1. 将此添加到css中 .logo {显示:内联块；}