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

Question

您好，我在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);
}

我想要的东西（第一张图片是我得到的第二张图片是我正在试图做的或接近的事情）：

但是我无法在偏斜的<h2>旁边找到<p>和<div>。

Answer 1

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>

Answer 2

将内容包装在自己的div中，与.img1分开，并显示.img1和内容容器inline-block。这将彼此并排显示您的图像和内容：

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

<div class="about-imgs">
  <div class="img1">
   <div>
     <img src="https://placekitten.com/100/100" alt="" width="307" height="203" />
   </div>
  </div>
  <div class="content">
   <h2>Title</h2>
   <p>Some Content</p>
  </div>
 </div>

Answer 3

.about-imgs{
 display: flex;
 width: 100%;
}

<section class="about-imgs">
    <div class="skew-border">
        <img src="someImg"/>
    </div>
    <div class="about-imgs-description">
        <h2>Title</h2>
        <p>Description</p>
    </div>
</section>