Question

我正在尝试重新创建这个简单的网站布局：Website image

在标题标记内，我无法将徽标图像与带有标语的绿色图像对齐，如下所示：failed attempt。

以下是我在该领域的代码：

header {
overflow: hidden; 
}
.container {
width: 780px;
margin-left: auto;
margin-right: auto; 
}
.logo {
width: 347px;
margin-left: auto;
margin-right: auto;  
}
.slogan {
background-image: url(images/header-vet.jpg);
padding: 15px;
float: left;
}

这是HTML：

<header>
<div class="header_img">
<img src="images/main-logo.jpg" alt="Vetinfo logo">
</div>
<div class="slogan">
Welcome to VetInfo
</div>
</header>

Answer 1

您可以使用flexbox：

＆＃13;

header {
  overflow: hidden;
  display: flex;
  flex-flow: row;
}

.container {
  width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 347px;
  margin-left: auto;
  margin-right: auto;
}

.slogan {
  background-image: url(images/header-vet.jpg);
  padding: 15px;
}

＆＃13;

<header>
  <div class="header_img">
    <img src="images/main-logo.jpg" alt="Vetinfo logo">
  </div>
  <div class="slogan">
    Welcome to VetInfo
  </div>
</header>

＆＃13;

将子元素放在标题中

1 个答案: