时间戳

首页 > 解决方案 > 如何使我的内容显示在图像的右侧而不是图像下方？

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

问题描述

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

我想要的（第一张图片是我得到的第二张图片是我想要做或接近的）： 在此处输入图像描述

但我无法得到skewed的<h2>and next 。<p><div>

标签： htmlcss

解决方案

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>

推荐阅读