需要在同一行上显示图像和文本

Question

我不太擅长CSS，我只是在学习。我需要将类“ profile_picture”的div与类“ text”的div放在同一行。我可以得到一些指导。

    <div class="card">
<div class="cardimage">
  <img src="./images/desert.jpg" alt="Desert Picture" height="194">
</div>
<div class="text">
  <h2 class="card_title">Title goes here</h2>
  <div class="sec_text"> Secondary text </div>
</div>
<div class="profile_picture">
  <img alt="Profile Picture" src="./images/person-avatar.jpg" width="40">
</div>
<div class="bodytext">
  <p class="card_text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>
</body>

下面是我的CSS

.card {
    width: 344px;
    background: red;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

}
* {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;

 }
 .bodytext {
     padding: 16px;
 }

 .cardimage {
    text-align:center;
 }
 .card_title {
     color: #000;
     font-size: 22px;
 }
 .sec_text, .card_text {
     color: #232F34
 }
 .card_text {
     font-size: 11px;
 }

Answer 1

您可以将个人资料图片和文本类别都设置为display: inline-block;

添加此：

.profile_picture{
   display: inline-block;
 }

 .text {
   display: inline-block;
 }

这是一个工作示例：

.card {
    width: 344px;
    background: red;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

}
* {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;

 }
 .bodytext {
     padding: 16px;
 }

 .cardimage {
    text-align:center;
 }
 .card_title {
     color: #000;
     font-size: 22px;
 }
 .sec_text, .card_text {
     color: #232F34
 }
 .card_text {
     font-size: 11px;
 }
 
 .profile_picture{
   display: inline-block;
   float: left;
 }

 .text {
   display: inline-block;
 }

<div class="card">
<div class="cardimage">
  <img src="https://www.w3schools.com/html/img_girl.jpg" alt="Desert Picture" height="194">
</div>
<div class="text">
  <h2 class="card_title">Title goes here</h2>
  <div class="sec_text"> Secondary text </div>
</div>
<div class="profile_picture">
  <img alt="Profile Picture" src="https://www.w3schools.com/html/img_girl.jpg" width="40">
</div>
<div class="bodytext">
  <p class="card_text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>