3

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

  1. 锚定到父对象右下角的“数量”容器。它的宽度是动态的，但应该总是比父容器小很多。
  2. 显示当前搜索条件的“面包屑”容器。它的宽度可以变化甚至包裹。

我已经设法让这几乎可以工作，但是有一个边缘情况，当“面包屑”是一定长度时，来自两个子容器的文本重叠。

下面是一些关于它的外观的示例以及它当前如何被破坏的示例：

样本

这是 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>

注意：如果不能完全按照我的要求做，下面是一个潜在的替代方案：选择

谢谢你的帮助。

4

1 回答 1

2

无需更改标记，此 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）

将绝对定位更改为浮点数并将第一个子元素设置为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/

于 2012-12-17T20:54:23.343 回答