获取标题中同一行上的文本和图像

Question

我想在横幅的左手边与两行文字在页面的右手边另一个以上的标志，所有对齐彼此。

​

.row {
  width: 100%;
  display: wrap;
  flex-wrap: wrap;
}

.logo img {
  width: 25%;
  height: auto;
}

.col-9 {
  width: 75%;
  text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="grid">
  <div class="row">
    <div class="logo"><img src="image.jpg" alt="image"></div>
    <div class="col-9">
      <h1>Title1</h1>
    </div>
    <div class="col-9">
      <h4>Title2</h4>
    </div>
  </div>
</div>

​

Answer 1

您可能只需要向.logo添加float: left;

在这里了解更多关于CSS Floats的信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

Answer 2

您也可以使用原生CSS Grid。

 .row {
 width: 100%;
 display: grid;
 grid-template-columns: 1fr 3fr;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout