html - 如何使我的内容显示在图像的右侧而不是图像的下方？

This question already has answers here:

How do I put text that is inside a P element next to a image?
                                
                                    （4个答案）
                                
                        
                                在10个月前关闭。
            
                    
您好，我在HTML中有以下代码：

<div class="about-imgs">

     <h2><?php the_title(); ?></h2>
     <div class="img1">
     <div><img src="img1.jpg" alt="" width="307" height="203" /></div><p>Some Content</p>
 </div>

在CSS中

    img{
    height: 230px !important;
    width: 230px !important;
    transform: skewX(-7deg);
    padding-left: 10px;
}
.img1{
        margin: 20px;
        width: 245px;
        height: 240px;
        display: inline-block;
        background: transperant;
        border: 1px solid red;
        transform: skewX(7deg);
}

我想要的（第一张图片是我得到的第二张img是我想要做的或接近的事情）：


但是我不能在倾斜的<h2>旁边找到<p>和<div>。

最佳答案

img {
  height: 100px !important;
  width: 100px !important;
  transform: skewX(-7deg);
  padding-left: 10px;
}

.img1 {
  margin: 20px;
  width: 120px;
  height: 120px;
  display: inline-block;
  background: transperant;
  border: 1px solid red;
  transform: skewX(7deg);
}

.textWrapper {
  display: inline-block;
  height: 120px;
}

<div class="about-imgs">
  <div class="row">
    <div class="img1">
      <div>
        <img src="https://www.mediawiki.org/static/images/project-logos/mediawikiwiki.png" alt="" width="100" height="100" />
      </div>
    </div>
    <div class="textWrapper">
      <h2> Ma title </h2>
      <h4>Best Developer in Town !</h4>
    </div>
  </div>

关于html - 如何使我的内容显示在图像的右侧而不是图像的下方？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55424053/