gpt4 book ai didi

html - 需要帮助修复 CSS 四列表

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

我的 CSS 四列表出现一些问题。

当其中一张图片较短时,它就会出现问题。 (见截图)

这是 CSS:

#results{background:#fff;padding:0 0 26px}
.result{float:left;width:25%}
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px}
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden}
.result-img img{display:block;margin:0;width:100%}
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase}
.result .row.stripe{background:#f6f9fb}
.result .row:last-child{font-family:'BdCn',Arial,sans-serif}
.prop{color:#373736;float:left;width:40%}
.value{color:#0f92cb;float:right;width:60%}

这是我的 HTML 片段:

<div id="results" class="clr">
<div id="results-inside" class="clr block">
<div class="result">
<div class="result-cover">
<div class="result-img"><img src="images/res.jpg" alt="" /></div>
<a class="result-title" href="#">31698-1</a>
<div class="result-props">
<div class="row clr">
<div class="prop">Code1:</div>
<div class="value">29A</div>
</div>
<div class="row clr">
<div class="prop">Code2:</div>
<div class="value">24A0</div>
</div>
<div class="row clr">
<div class="prop">Code3:</div>
<div class="value">0</div>
</div>
<div class="row clr">
<div class="prop">Code4:</div>
<div class="value">627A</div>
</div>
</div>
</div>

Ideally all picture is allign nicely

but When one of the picture is shorter但是,当其中一张图片较短时,对齐方式就会变得不稳定。

最佳答案

您可以做的是在您的 4 个 block 周围添加一个 div 并将其向左浮动,并为其设置 100% 的宽度以清除每一行。

关于html - 需要帮助修复 CSS 四列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21766793/

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