CSS样式问题铬：直列块

<div class="hi> 
    <div class="hello">name</div> 
    <div class="world"><img /></div> 
</div> 
.hi{ 
    height: auto; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
.hello{ 
     display: inline-block; 
     font-size: 16px; 
     font-weight: bold; 
     height: 22px; 
     margin: 3px 0; 
     max-width: 80%; 
     overflow: hidden; 
} 
.world{ 
     background: url("***") no-repeat scroll 0 0 transparent; 
     display: inline-block; 
     height: 13px; 
     left: 5px; 
     position: relative; 
     top: -9px; 
     width: 14 
}

的问题是，当名称被超过并且施加最大宽度在世界的div背景图像出现错位（略高于出现），而名称为哪些最大宽度没有得到应用显示正确。CSS样式问题铬：直列块

这个想法是名称和图像应该在同一行。名称中心对齐和图像旁边。并且如果名称超过，则应该截断，以便图像不会显示在下一行中。我正在给背景图片，因为我有一个图像内的图像。

这个问题发生在铬单独。

来源

2012-10-15 Kumar R

你能告诉我们生成的输出是什么或你的意图是什么？现在有些模糊。 – dgarbacz

它看起来像这样：kumar ^图片当最大宽度被应用和kum 当max-width没有得到应用。 –

max-width: 80%并不掩盖<div>是块级元素的事实。当宽度未明确设置时，固有地始终为width:100%。如果你将.hello的宽度设置为80%，我想你会看到你的期望。

来源

2012-10-15 15:20:14 dgarbacz

我试过了，它工作。我的要求是图像应该在文本旁边。所以如果我将宽度设置为80％，图像总是很遥远。如果我给出最大宽度，则只要完整的最大宽度没有被占用，图像就会在文本旁边。我改变了我的分区跨度和标签。同样的问题发生 –

如果我没有指定宽度并将其显示为内联，则当名称超出该块时，设计会崩溃。并且因为我想让这个名字以float:left为中心，所以它不是一个可行的选择.Th的想法是名字和图像应该在同一行中，名字中心对齐，图像在它旁边。如果名称超过，则应该截断，以便图像不会移动到下一行。 –

您将能够成功截断的唯一方法是在文本元素和图像上设置“高度”。这并不能保证会发生削波。我建议重新考虑可能会影响可访问性的设计。我在这里创建了一个例子，我相信你正在努力完成。注意文本被剪切http://codepen.io/anon/pen/shmla – dgarbacz

CSS样式问题铬：直列块

回答

相关问题