Question

我在创建符合以下要求的订单项时遇到问题：

订单项包含：顶部/左侧对齐图标，标题和可选字幕
文字应垂直对齐中间
容器的宽度是动态的

这是一个小提琴：

问题：

我无法弄清楚如何在不对某些东西进行硬编码的情况下使这个CSS工作。请参阅上面的JS Fiddle链接。

我无法弄清楚如何获得＆＃34; .licontent＆＃34; div在不知道容器宽度的情况下换行到下一行。

到目前为止这是CSS：

.lineItems {
    list-style: none;
    padding: 0;
}

.lineItems > li {
    border: 1px solid #eaeaea;
}

.lineItems .title {
    margin: 0;
}

.lineItems .licontent {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}

.lineItems .icon {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

.lineItems .icon:after {
    content: 'ICON';
}

Answer 1

听起来像CSS table和table-cell可能是一个很好的解决方案。它支持未知宽度和垂直对齐。

并使用table-layout: fixed; + word-wrap: break-word;来换行长行。

DEMO： http://jsfiddle.net/pn5pja7e/

.lineItems {
    list-style: none;
    padding: 0;
}

.lineItems > li {
    display: table;
    width: 100%;
    table-layout: fixed; /*NEW*/
    word-wrap: break-word; /*NEW*/
}

.lineItems .licontent {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    /* word-break: break-all; */
    border: 1px solid blue;
}

.lineItems .title {
    margin: 0;
}

.lineItems .icon {
    display: table-cell;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

.lineItems .icon:after {
    content: 'ICON';
}

Answer 2

直截了当，如果我理解正确的话。你只需要添加一个基于％的宽度和一个@media查询来根据需要减少％，因为图像也不是基于百分比。

JSFIDDLE

.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
width:85%;
word-break: break-word;
}

@media screen and (max-width: 550px) {
    .lineItems .licontent {width:73%}
}

如何创建具有垂直中间对齐文本的行项目？

2 个答案: