gpt4 book ai didi

html - 如何正确打破 CSS3 列?像素线在错误的列中

转载 作者:行者123 更新时间:2023-11-28 15:22:58 25 4
gpt4 key购买 nike

目前正在构建我的 WordPress 插件,我正在检查它的样式和布局。

我有内在。 div 是 columns:2 的 css-set, children 有 column-break:avoid; (我尝试了所有组合)但它仍然在错误的列中显示一行。

问题图片:enter image description here

蓝色 block 在左列留下了一个像素的高线,它不应该。

<div class="parents columns two">

<aside class="myp myp-card female">

<a href="http://localhost/dev/#" title="Mother">

<div class="card-image">
<img src="http://localhost/dev/wp-content/uploads/2015/05/Skye_Medium.jpg" alt="View Mother" style="width:100%;">
</div>

<div class="card-overlay">
<h1 class="card-title">Mother</h1>
</div>

</a>

</aside>

<aside class="myp myp-card male">

<a href="http://localhost/dev/#" title="Father">

<div class="card-image">
<img src="http://localhost/dev/wp-content/uploads/2015/05/Border_Collie_liver_portrait.jpg" alt="View Father" style="width:100%;">
</div>

<div class="card-overlay">
<h1 class="card-title">Father</h1>
</div>

</a>

</aside>

</div>

还有我的 CSS...

.columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
.columns > * { display: block; width: 100%;
-webkit-column-break:avoid; -moz-column-break:avoid; -o-column-break:avoid; -ms-column-break:avoid; column-break:avoid; }

.columns.one { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
.columns.two { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.columns.three { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
.columns.four { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
.columns.five { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }

.myp-card { position: relative; margin: 0 0 1em; padding: 0; }
.myp-card a { border:0; }
.myp-card .card-image { position: relative; background-color: #000; }
.myp-card .card-image img { opacity: .25; width: 100%; }
.myp-card .card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; }
.myp-card .card-overlay .card-title { font-size: 1.1em; margin: 0; padding: 1em; color: #000; }
.myp-card a:hover .card-image img { opacity: 1; }
.myp-card a:hover .card-overlay { display: none; }

.myp-card.male .card-image {
background: rgb(30, 115, 190);
}
.myp-card.male .card-overlay .card-title {
color: #FFFFFF;
}
.pedigree-tree li.male > span {
border-color: rgb(30, 115, 190);
}
.male-color {
color: rgb(30, 115, 190);
}
.myp-card.female .card-image {
background: rgb(232, 37, 215);
}
.myp-card.female .card-overlay .card-title {
color: #FFFFFF;
}
.female-color {
color: rgb(232, 37, 215);
}

我怎样才能摆脱这条线?我设法用 display: list-item;对于旁边的标签,但它会创建一个我无法控制的边距(margin:0 和 padding:0 不起作用)。

谢谢大家...

最佳答案

也许,在您的 CSS 中的某处,您使用了 vertical-align: bottom; 作为图像?停用这对我来说是解决方案,因为我最近遇到了同样的问题......

关于html - 如何正确打破 CSS3 列?像素线在错误的列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31477117/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com