Question

我无法在不指定宽度的情况下保持两个嵌套的内联块对齐。我可以使用表获得我想要的行为，但更喜欢使用更简单的标记。这是基本的标记：

Thread.Sleep(Timeout.Infinite)

这是基本的css：

<div class="error">
  <i></i>
  <div class="message">Ruh oh</div>
</div>

以下是要求：

.error可以是任何宽度（通常为100％）
我将固定宽度（通常为45px）
.message将填充父.error
i和.message将在中间垂直对齐
.message无法在i
没有javascript

这是一个小提示，显示一个好的行（短错误），一个坏行（较长的错误消息包裹在i下面）和一个带表的工作示例（但我不想要表）。请赐教！

http://jsfiddle.net/3m2db1hw/

Answer 1

您需要使用display:table将父级Div和display:table-cell用于子级，即<i> and <div>

.error {
    border: 2px solid red;
    padding: 8px 10px;
    display:table;
}

i {
    width: 45px;
    vertical-align: middle;
    display:table-cell !important;
}

.message {
    display: table-cell;
    vertical-align: middle;
}

这里是编辑jsfiddle http://jsfiddle.net/3m2db1hw/1/

如何在不指定宽度的情况下防止嵌套元素的包装

1 个答案: