Question

我希望横幅左侧的徽标在页面右侧有两行文字，彼此对齐。

＆＃13;

.row {
  width: 100%;
  display: wrap;
  flex-wrap: wrap;
}

.logo img {
  width: 25%;
  height: auto;
}

.col-9 {
  width: 75%;
  text-align: right;
}

＆＃13;

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

＆＃13;

Answer 1

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

在此处了解有关CSS浮动的更多信息：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

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

2 个答案: