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

时间:2019-03-29 19:05:36

标签: html css css3

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

我想要的东西(第一张图片是我得到的第二张图片是我正在试图做的或接近的事情): enter image description here

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

将内容包装在自己的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>

答案 2 :(得分:0)

.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>