ヘッダーの同じ行にテキストとイメージを表示する

Question

バナーの左側に2行のテキストがページの右側に重なり、それぞれが一列に並んでいるロゴが必要です。あなたはおそらくちょうどfloat: left;

.logoに追加する必要があり

.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

は、CSSの詳細情報ここに浮かぶ：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

Answer 2

また、ネイティブCSSグリッドを使用することができます。

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

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