无法并排排列文本和图像？

Question

我添加了图片和文字。文字包含1个<h6>和2个<p>标记。我尝试使用float:left，但它并没有并排显示。

content.js：

 <div className="col l4">
    <div className="card1">
        <img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
      <h6 className="cardtitle1">New Launch</h6>
            <p className="cardcontent1">JAVA</p><p></p>
        <p className="cardcontent1">Foundations</p>
  </div>
</div>

<div className="col l4">
  <div className="card2">
      <img className="neuralcard" src={neural} alt="Neural Network" height="65" width="65"></img>
      <h6 className="cardtitle2">Enroll Now</h6>
            <p className="cardcontent2">Neural Newtwork</p><p></p>
        <p className="cardcontent2">Foundations</p>
  </div>
</div>

的CSS：

.cardcontent{
    float: left;
}

.card1 {
    width: 100%;
}

.card1 > h6 {
    margin: 0px;
}

我想在New Launch的图像右侧显示JAVA Foundations card2，但是当前的css不起作用我尝试了几个css样式但不起作用。< / p>

截图：

Answer 1

尝试在此处使用 Flexbox ...并将您的右侧内容包装到div中以获得更好的练习和可读性

.card1 {
  display: flex;
  align-items: flex-start;
}

h6 {
  margin-top: 0;
}

.item {
  padding-left: 10px;
}

<div class="card1">
  <img className="javacardimg" src="http://via.placeholder.com/100x100?text=JAVA" alt="Java">
  <div class="item">
    <h6 className="cardtitle1">New Launch</h6>
    <p className="cardcontent1">JAVA Foundations</p>
  </div>
</div>