Question

我有一个固定宽度的“搜索”容器。它有两个孩子：

锚定到父级右下角的“数量”容器。它的宽度是动态的，但应该总是比父容器小一点。
显示当前搜索条件的“breadcrumbs”容器。它的宽度可以变化，甚至包裹。

我设法让它几乎正常工作，但是有一个边缘情况，当“breadcrumbs”是一定长度时，来自两个子容器的文本重叠。

下面是它应该如何看的一些例子以及它当前如何被破坏的一个例子：

sample

这是HTML / CSS代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.search {
    border: 1px solid blue;
    width: 600px;
    position: relative;
}
.breadcrumbs {
    border: 1px solid green;
}
.quantity {
    border: 1px solid red;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
<b>Sample 1</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3</div>
    <div class="quantity">51-100 of 5000</div>
</div>
<b>Sample 2</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3 &gt; Blah Search Filter 4</div>
    <div class="quantity">51-100 of 5000</div>
</div>
<b>Broken Sample</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3 &gt; Uh Oh!</div>
    <div class="quantity">51-100 of 5000</div>
</div>

</body>
</html>

注意：如果无法完全按照要求执行操作，则下面是一个可能的选择： alternative

感谢您的帮助。

Answer 1

无需更改标记，此CSS将起作用：

.search {
    border: 1px solid blue;
    width: 600px;
    overflow: hidden;
}
.breadcrumbs {
    border: 1px solid green;
    display: inline;
}
.quantity {
    border: 1px solid red;
    float: right;
}

http://jsfiddle.net/mC5QG/（小修改，以便您可以看到完整效果）

http://jsfiddle.net/mC5QG/2/（已将margin-top: -1px添加到.quantity）

将绝对定位更改为float并将第一个子元素设置为display: inline。无论元素的宽度是多少都应该有效。

替代替代外观的替代解决方案：

.search {
    border: 1px solid blue;
    display: table-row;
}

.breadcrumbs, .quantity {
    display: table-cell;
}

.breadcrumbs {
    border: 1px solid green;
}
.quantity {
    border: 1px solid red;
    white-space: pre;
    vertical-align: bottom;
}

http://jsfiddle.net/mC5QG/1/

CSS - 具有动态宽度的固定位置

1 个答案: