獲取span元素填充空間一個div

我想有這樣的事情：獲取span元素填充空間一個div

 
|--------------fixed width---------------| 
Title1 .......................... value1 
Title2 ................... another value 
Another title ........ yet another value

這裏是我的HTML代碼示例：

<div class="container"> 
    <span class="left">Title</span> 
    <span class="center">&nbsp;</span> 
    <span class="right">value</span> 
</div>

在這裏，我的CSS：

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display: inline-block; 
    outerWidth: 100%; 
} 

.right { 
    display: block; 
    border: 1px dotted red; 
    float: right; 
} 

.left { 
    display: block; 
    text-align: right; 
    border: 1px dotted red; 
    margin-right: 0px; 
    float: left; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
}

是否可以使跨度「中心」展開以填充其他兩個跨度元素之間的空間？

守則的jsfiddle：http://jsfiddle.net/XqHPh/

謝謝！

來源

2013-06-12 Mithenks

您想要爲此創建和擴展範圍嗎？ – Nitesh

我想他可能想要一排點... –

如果你重新排序的CSS你HTML，你可以得到一個簡單的解決方案：

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div>

將兩個浮動提前.center元素的元素。 .center元素將處於常規內容流中並環繞左側和右側內容。

的CSS：

.center { 
    display: block; 
    border-bottom: 1px dotted blue; 
    overflow: auto; 
    position: relative; 
    top: -4px; 
} 

.right { 
    float: right; 
    margin-left: 10px; 
} 

.left { 
    float: left; 
    margin-right: 10px; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
}

當浮動的元件，顯示類型計算阻塞，所以無需聲明它。

另外，.center，如果添加overflow: auto，您約束塊，因此不會超出浮動元素的邊緣。因此，您的底部邊框不會標題標題和值文本。

最後，您可以添加position: relative並將.center向上移動幾個像素以使邊框與文本的基線更接近。

小提琴：http://jsfiddle.net/audetwebdesign/DPFYD/

來源

2013-06-12 12:12:28

+1良好完全解釋的解決方案。 – Liam

完美！謝謝！ – Mithenks

爲此，你需要更改HTML結構這樣

HTML

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div>

，這裏是爲.center span

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display:block; 
}

jsFiddle File

來源

2013-06-12 11:57:10

這很好。由於'.center'元素只是爲了視覺效果，它在語義上並不重要，因此重定位是一個很好的調用。 –

'display：inline-block'怎麼樣？ – David

@David內嵌塊會縮小以適應其內容，因此需要做更多工作才能填充左側和右側元素之間的空間。 –

獲取span元素填充空間一個div

回答

相關問題