如何让我的内容显示在图像的右侧而不是图像的下方? [重复]

问题描述 投票:0回答:3

这个问题在这里已有答案:

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

html css css3
3个回答
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>

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>

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>
© www.soinside.com 2019 - 2024. All rights reserved.