html - 将最小高度应用于列表项

Question

我在 Laravel 框架中使用 Bootstrap 主题，我遇到了允许列表项根据其内容增加高度的问题。

JSFiddle:http://jsfiddle.net/h66br41p/

我已经改变了:

.framemail .window .mail li i {
display: inline-block;
height: 70px;
width: 6px;
}

收件人:

.framemail .window .mail li i {
display: inline-block;
min-height: 70px;
width: 6px;
}

这不会产生任何差异。无论内容如何，​​它仍然是70px的固定高度。

这是针对该区域的任何其他 css:

.framemail .window .mail li {
background-color:#3d3d3d;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
border-top: 1px solid #888;
position: relative;
margin-left:-18px;
}

.framemail .window .mail li:first-child {
border-top: none;
}

.framemail .window .mail li:hover {
background-color: #5d5b5b;
}

.framemail .window .mail li:after,
.framemail .window .mail li:before {
border-left: 8px solid transparent;
content: '';
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}

.framemail .window .mail li i {
display: inline-block;
height: 70px;
width: 6px;
}

.framemail .window .mail li .read {
background-color: #ddd;
}

.framemail .window .mail li .unread {
background: #b2c831;
}

.framemail .window .mail li img {
border-radius: 2px;
height: 36px;
left: 12px;
position: absolute;
top: 6px;
width: 36px;
}

.framemail .window .mail li p {
font: 13px sans-serif;
left: 56px;
position: absolute;
top: 3px;
}

这是 HTML:

<ul class="mail">
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified<br>Clipping<br>Clipping</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                </ul>

我希望这些列出要根据里面的文本调整大小的元素。是什么让它们固定下来？

Answer 1

只需删除 min-height 并添加 padding-top、padding-bottom 即可从边框填充。在此设计中，您不需要为内容 block 设置最小高度或固定高度。

然后你需要做一个两部分:

去掉任何位置绝对元素，做一个左右浮动。 Atfer float 创建一个明确的两者。 fiddle 演示需要全部更换。

这是关于 Fiddle 的更新更新