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)

絶対位置を 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/

于 2012-12-17T20:54:23.343 に答える