如何解决我遇到了与对齐,内联块,图片和字体有关的问题
请检查上面的图像,第3,4张照片稍微溢出。我认为是因为h4,当浏览器缩小时,它溢出并进入下一行。我想将其均匀对齐。我该如何解决?
.items {
width: 23.2%;
margin-right: 1.2%;
display: inline-block;
position: relative;
}
.items:nth-child(5n) {
margin-right: 0;
}
.items span:first-child {
position: absolute;
}
.items h4 {
font-size: 0.9em;
width: 100%;
padding: 10px 0 0 0;
}
.items img {
width: 100%;
}
.items img.star {
width: auto;
}
.items span:last-child {
display: block;
font-size: 0.8em;
}
<article class="shop_best">
<div class="line_sec">
<span></span>
<h3>베스트셀러</h3><span></span>
</div>
<div class="items">
<span><img src="images/best_sell1_2.png"></span>
<img src="images/best_sell1.jpg">
<h4>메모리즈 바디오일 – 100ml</h4>
<img src="images/rate_5.png" class="star" alt="rating">
<span>28,000원<span>
</div>
<div class="items">
<span><img src="images/best_sell2_2.png"></span>
<img src="images/best_sell2.jpg">
<h4>스킨 리파잉 크림 클렌저 – 60ml</h4>
<img src="images/rate_4.png" class="star" alt="rating">
<span>54,000원<span>
</div>
<div class="items">
<span><img src="images/best_sell3_2.png"></span>
<img src="images/best_sell3.jpg">
<h4>아로마테라피 시너지 바디오일 – 100ml</h4>
<img src="images/rate_4.png" class="star" alt="rating">
<span>29,000원<span>
</div>
<div class="items">
<span><img src="images/best_sell4_2.png"></span>
<img src="images/best_sell4.jpg">
<h4>인블룸 그린 버베나 프레이그런스 디퓨저 – 300ml</h4>
<img src="images/rate_5.png" class="star" alt="rating">
<span>42,000원<span>
</div>
解决方法
将项目包装在1 div
中,然后将以下CSS添加到div
display: flex;
flex-wrap: wrap;
就像这样:
<div style="display: flex;flex-wrap: wrap;">
<div class="items">..</div>
<div class="items">..</div>
<div class="items">..</div>
</div>
,
对我来说,最灵活的解决方案是使用基于jQuery的调整。如果您始终拥有相同的内容,那么您当然可以在CSS中使用方向。但是,如果内容不同或动态更新,则建议使用以下方法。
在您的html文件中
首先,您必须将所有标题元素打包到一个容器中,并为其赋予相同的类名。
<div class="headline">
<h4> My Headline </h4>
</div>
在您的jQuery文件中
此函数检查具有相同类的每个元素,搜索具有最大空格(即是否需要换行)的元素,并将所有元素设置为此高度。因此,所有头条新闻都有相同的空间。
function equal_height() {
var highest_element = 0;
// Lösche die Höhe
$('.headline').each(function() {
$(this).removeAttr('style');
});
// Prüfe,welches Element am höchsten ist
$('.headline').each(function() {
if ($(this).height() > highest_element) {
highest_element = $(this).height();
}
});
// Weise diese Höhe allen Elementen zu.
$('.headline').each(function() {
$(this).height(highest_element);
});
};
/*Load Function after all CSS loaded*/
$(window).on('load',function(){
equal_height();
});
/*Fire Function when Resizing*/
var resizeTimer;
$(window).on('load',function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(equal_height,100);
});
对我来说,它与动态内容完美结合。所有标题都将根据具有最大间距的元素设置为相等的间距。之后,使用CSS即可轻松实现居中。
我希望能有所帮助。我当然可以回答问题。
PS:您可以在我的网站https://www.baumarktaktion.de上查看相同的原理。
,这是由于产品名称的长度,您的包装箱被拉起了。将所有框包装在单独的div中是合乎逻辑的,因为带框的文章有一个父级。将flex
规则设置为父items_box
框。
.items { width: 23.2%; margin-right: 1.2%; display: inline-block; position: relative; }
.items:nth-child(5n) {margin-right: 0;}
.items span:first-child {position: absolute;}
.items h4 {font-size: 0.9em; width: 100%; padding: 10px 0 0 0 ;}
.items img{width: 100%;}
.items img.star {width: auto;}
.items span:last-child {display: block; font-size: 0.8em;}
/*add this it*/
.items_box {
display: flex;
align-items: baseline;
}
<article class="shop_best">
<div class="line_sec">
<span></span><h3>베스트셀러</h3><span></span>
</div>
<div class="items_box">
<div class="items">
<span><img src="images/best_sell1_2.png"></span>
<img src="images/best_sell1.jpg">
<h4>메모리즈 바디오일 – 100ml</h4>
<img src="images/rate_5.png" class="star" alt="rating">
<span>28,000원</span>
</div>
<div class="items">
<span><img src="images/best_sell2_2.png"></span>
<img src="images/best_sell2.jpg">
<h4>스킨 리파잉 크림 클렌저 – 60ml</h4>
<img src="images/rate_4.png" class="star" alt="rating">
<span>54,000원</span>
</div>
<div class="items">
<span><img src="images/best_sell3_2.png"></span>
<img src="images/best_sell3.jpg">
<h4>아로마테라피 시너지 바디오일 – 100ml</h4>
<img src="images/rate_4.png" class="star" alt="rating">
<span>29,000원</span>
</div>
<div class="items">
<span><img src="images/best_sell4_2.png"></span>
<img src="images/best_sell4.jpg">
<h4>인블룸 그린 버베나 프레이그런스 디퓨저 – 300ml</h4>
<img src="images/rate_5.png" class="star" alt="rating">
<span>42,000원</span>
</div>
</div>
</article>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。