这个问题在这里已有答案:
您好,我在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>
。
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>
将您的内容包装在自己的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>
.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>