<分区>
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);
}
我想要的(第一张图片是我得到的第二张图片是我想要做的或接近的):
但我无法获得 <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>关于html - 如何让我的内容出现在图片的右侧而不是下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55424053/