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