如何在article元素中获取h3下的段落标记

Question

我有一个我写的克隆脚本页面：

*, ::after, ::before {
box-sizing: inherit;
}
article, aside, footer, header, nav, section {
display: block;
}
img {
border-style: none;
}
li, ul {
list-style: none;
}
.listing-extra-detail, .listing-key-specs {
list-style-type: none;
margin: 8px 0 4px;
padding: 0;
width: 100%;
max-height: 36px;
}
.product-card {
background-color: #fff;
box-shadow: 0 8px 8px -8px rgba(0,0,0,.16),0 0 2px rgba(0,0,0,.1);
border-radius: 4px;
border: 2px solid;
padding: 0;
overflow: hidden;
width: 100%;
position: relative;
transition: all .25s ease-in-out;
margin-bottom: 20px;
}
.product-card-content {
width: 50%;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-card-content p {
margin-top: 20px;
}
.product-card-image {
flex-direction: row;
max-width: 46%;
}
.product-card-image {
height: 100%;
position: relative;
display: flex;
z-index: 1;
overflow: hidden;
width: 100%;
align-self: center;
align-items: stretch;
}
.product-card-image .product-card-image__main-image {
width: 76%;
margin-bottom: 0;
margin-right: 2px;
}
.product-card-image .product-card-image__thumbnails {
flex-direction: column;
max-width: 24%;
}
.product-card-image .product-card-image__thumbnails {
display: flex;
position: relative;
}
.product-card-image .product-card-image__thumbnails .product-card-image__image:first-of-type {
margin-top: 0;
}
.product-card-image .product-card-image__thumbnails .product-card-image__image {
max-width: 100%;
max-height: 33%;
margin-top: 2px;
}
.product-card-image .product-card-image__thumbnails .product-card-image__image {
width: 100%;
margin-right: 2px;
}
.product-card-image .product-card-image__image {
height: 100%;
}
.product-card__inner {
display: flex;
}
article.cont1 {
display: block;
float: right;
}
.price {
display: block;
float: right;
left: 80px;
color: #333;
line-height: 1.2;
}

<header>
CAR SALES
</header>
<article class="product-card">
<div class="product-card__inner">
<section class="product-card-image ">
<img class="product-card-image__image product-card-image__main-image" alt="" srcset="
https://m.atcdn.co.uk/a/media/w262h198pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg 262w,
https://m.atcdn.co.uk/a/media/w340h255pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg
" sizes="
(max-width: 1024px) 262px,
340px
" src="https://m.atcdn.co.uk/a/media/w340h255pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg" loading="lazy" data-label="search appearance click ">
<div class="product-card-image__thumbnails">
<img class="product-card-image__image" loading="lazy" data-label="search appearance click " srcset="
https://m.atcdn.co.uk/a/media/w84h63pf7f7f5/7c34445e3f9a43ebbec931cddb643199.jpg 84w,
https://m.atcdn.co.uk/a/media/w108h81pf7f7f5/7c34445e3f9a43ebbec931cddb643199.jpg
" sizes="
(max-width: 1024px) 84px,
108px
" src="https://m.atcdn.co.uk/a/media/w108h81pdfdfdf/7c34445e3f9a43ebbec931cddb643199.jpg" alt="">
<img class="product-card-image__image" loading="lazy" data-label="search appearance click " srcset="
https://m.atcdn.co.uk/a/media/w84h63pf7f7f5/f4d93ea19d47498eb2227477e3834ee5.jpg 84w,
https://m.atcdn.co.uk/a/media/w108h81pf7f7f5/f4d93ea19d47498eb2227477e3834ee5.jpg
" sizes="
(max-width: 1024px) 84px,
108px
" src="https://m.atcdn.co.uk/a/media/w108h81pdfdfdf/f4d93ea19d47498eb2227477e3834ee5.jpg" alt="">
<img class="product-card-image__image" loading="lazy" data-label="search appearance click " srcset="
https://m.atcdn.co.uk/a/media/w84h63pf7f7f5/9bd4e22610ba46429ace7689b13fd2e6.jpg 84w,
https://m.atcdn.co.uk/a/media/w108h81pf7f7f5/9bd4e22610ba46429ace7689b13fd2e6.jpg
" sizes="
(max-width: 1024px) 84px,
108px
" src="https://m.atcdn.co.uk/a/media/w108h81pdfdfdf/9bd4e22610ba46429ace7689b13fd2e6.jpg" alt="">

</div>
</section>
<div class="product-card-content">
<h3>Vauxhall Mokka 1.6</h3>
<p>2015, 65, silver, 8,000 miles</p>
</div>
<!-- 
<article class="cont1">
<h3>Vauxhall Mokka 1.6</h3>
<p>2015</p>
</article>
-->
<div class="price">
<h3>£21,990</h3>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__inner">
<section class="product-card-image ">
<img class="product-card-image__image product-card-image__main-image" alt="" srcset="
https://m.atcdn.co.uk/a/media/w262h198pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg 262w,
https://m.atcdn.co.uk/a/media/w340h255pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg
" sizes="
(max-width: 1024px) 262px,
340px
" src="https://m.atcdn.co.uk/a/media/w340h255pf7f7f5/6eaae6e733f747c2a0c8aab256582406.jpg" loading="lazy" data-label="search appearance click ">
</section>
<div class="product-card-content">
<h3>Vauxhall Mokka 1.6</h3>
<p>2015, 65, silver, 8,000 miles</p>
</div>
<!-- 
<article class="cont1">
<h3>Vauxhall Mokka 1.6</h3>
<p>2015</p>
</article>
-->
<div class="price">
<h3>£21,990</h3>
</div>
</div>
</article>

以整页形式查看代码段以查看问题。

这是造成最大问题的部分：

<div class="product-card-content">
<h3>Vauxhall Mokka 1.6</h3>
<p>2015, 65, silver, 8,000 miles</p>
</div>

它工作，但

元素没有像我预期的那样进入h3之下；我试过上边距和下边距等

文本总是在底部，我不明白为什么。

这个模板工作得很好，但我不知道如何解决这个问题；创建这个模板是一个缓慢的过程。

Answer 1

可以使用justify-content: start将内容放在元素div:的顶部

.product-card-content {
width: 50%;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: start;
}

Answer 2

所有元素都有由浏览器指定的默认边距。只需先将h3, p {margin:0}重置，然后在父div上更改.product-card-content {justify-content: start}这对我很有效。

如果这是你想要的。

在此处输入图像描述