CSS - 固定位置與動態寬度

我有一個固定寬度的「搜索」容器。它有兩個孩子：CSS - 固定位置與動態寬度

一個「數量」容器，錨定在父母的右下角。它的寬度是動態的，但應該總是比父容器小很多。
顯示當前搜索條件的「麪包屑」容器。它的寬度可以變化，甚至包裝。

我已經設法讓這個工作幾乎成功，但是有一個邊緣情況，當「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

感謝您的幫助。

來源

2012-12-17 dana

因爲你可以只設置'.breadcrumbs'有'寬度可供選擇：500px'或東西，但@cimmanon有一個很好的答案。 –

製作麪包屑固定寬度可能是解決方案。我希望寬度可以保持動態，但是'5 - 5'與1000'的100 - 110相比寬度不同。 – dana

，而無需改變你的標記，這個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-17 20:54:23 cimmanon

你的JSFiddle鏈接只是去jsfiddle.com –

是的，只是意識到我忘了保存它^^; – cimmanon

謝謝，這絕對是我所擁有的改進。不過，我想有兩個子div的錨定到父容器的底部。父容器下有一條水平線，如果麪包屑容器的底部與數量容器的底部不相同，則該水平線會關閉。作爲參考，我可以根據需要自由更改HTML標記。 – dana

CSS - 固定位置與動態寬度

回答

相關問題