gpt4 book ai didi

css - 标准化内联 block 列表项高度

转载 作者:太空宇宙 更新时间:2023-11-04 12:30:07 27 4
gpt4 key购买 nike

我有以下标记:

<ul class="info-list">
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Description
</div>
</li>
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Here is a description. More description. Very descriptive.
</div>
</li>
</ul>

这里是匹配样式:

.info-list{
text-align: center;
}

.info-item{
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: black;
}

.preview{
margin: 4px 4px 4px 0;
float: left;
display: block;
width: 128px;
height: 128px;
}

.data-wrapper{
margin: 4px 0 4px 4px;
float: left;
width: 128px;
height: 128px;
}

.description{
clear: both;
width: 264px;
height: 100px;
}

您将看到的问题是第二个元素的高度与第一个元素的高度相同,但它是由 div.description 元素中内容的长度支撑的。这可以通过将 white-space:nowrap 应用于 div.descriptiondiv.list-item 元素来解决,但这会导致div.description 向右溢出的内容。我该如何修复这个列表?我不想 float 元素,因为我希望它们在列表中居中,但内联空白处理由于某种原因导致问题,即使 div.description 元素都是相同的高度/宽度。

fiddle :http://jsfiddle.net/kap6quf6/2/

最佳答案

内联元素默认的垂直对齐方式是baseline,所以你可以为.info-item设置为middle或者top,这样它们就对齐了:

.info-item {
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: lightgray;
vertical-align:middle;
}

jsFiddle example

关于css - 标准化内联 block 列表项高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27726390/

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