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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您在此处遇到一些问题，clear:both;将清除.logo，您还需要将显示属性应用于两个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显示为内联。所以让logo div显示内联显示两者。

将此添加到您的css

.logo { 显示：内联块; }

给出样式后显示块不起作用

3 个答案: