似乎是一个简单、直接的例子,让我很适合。这是我正在拍摄的图像:
这是我的 HTML
<div class="container">
<div class="caption">
<div class="label">
Products that matter
</div>
<div class="content">
<p>Mauris leo diam, convallis at rhoncus at, pellentesque ut turpis. Nullam orci velit, dignissim a suscipit et, adipiscing vel magna. Mauris leo diam.</p>
</div>
</div>
</div>
和 CSS
.container {
width: 1000px;
margin-top: 50px;
}
.caption {
background: rgba(255,255,255,.9);
display: table;
width: 100%;
height: 66px;
}
.caption .label {
display: table-cell;
background: #94749c;
color: #fff;
font-size: 30px;
line-height: 30px;
font-weight: 400;
width: auto;
height: 66px;
vertical-align: middle;
}
.caption .content {
display: table-cell;
width: auto;
height: 66px;
vertical-align: middle;
}
我认为在纯 CSS 中实现这一点的最佳方法是使用 display: table 和 display table-cell。这样我们就可以得到适当的垂直对齐。问题是宽度。我最终想要的是适合文本长度的紫色单元格,而次要单元格线会中断。
问题是,根据次要单元的长度,它会将主要单元推入并导致换行。此外,如果您缩短第二个单元格的长度,主单元格会变得太大。
在没有javascript的情况下,我想做的是让主单元格自动格式化其宽度而不换行,然后让辅助单元格根据需要填充空格和换行符。
想法?