獲取三個div以在中間內容中的內容發生變化時自動調整大小

我想要做的是將三個div封裝在固定寬度的容器中，當中間div中的內容展開時將自動調整大小。隨着中間變大，旁邊的兩個變得更小，如果這是有道理的。獲取三個div以在中間內容中的內容發生變化時自動調整大小

<div id="container"> 
    <div class="one"/> 
    <div class="middle">...</div> 
    <div class="two"/> 
</div>

不知道如果我應該使用div或跨度爲此。

關於CSS的任何建議？

來源

2011-07-06 Naota

每個div的內容是什麼？他們中的任何人只是爲了顯示圖像或背景圖像？我想我問的是：你有什麼用途呢？ – thirtydot

@thirtydot中間div一側的兩個div將不包含任何內容，只是一個邊框頂部，中間div將包含兩個鏈接。 :) – Naota

@thirtydot的兩個div，中間的div將：

所以，你可以這樣做包含兩個鏈接。 :)

在這種情況下，我用簡單的東西，你可能能夠使用回答。

參見：http://jsfiddle.net/uZ5dn/

<div class="container"> 
    <span class="middle">content con tent the tent of cons content content</span> 
</div> 

.container { 
    border-top: 5px solid #f0f; 
    text-align: center; 
} 
.middle { 
    background: #fff; 
    display: inline-block; 
    position: relative; 
    top: -5px; /* same as border-top-width */ 
}

這不是真棒，但它可能是不夠好。

至少，我會更好地瞭解下一步該做什麼。

來源

2011-07-06 02:29:48 thirtydot

這很好！比我在做的好多了，謝謝你:) – Naota

沒問題。我指的是缺乏真棒，如果你不能用純色覆蓋邊界的中間部分（例如，出於透明度的原因），它是行不通的。 – thirtydot

如果我正確地閱讀你的問題，我懷疑你必須用JavaScript和DIVS來做到這一點。

您可以使用.height（）函數獲取並設置DIV的實際大小（以像素爲單位）。在側面中間的div將包含什麼，只是邊框頂部

if ($('#div2').height() > 200) { 
    $('#div1').height(100); 
    $('#div3').height(100); 
} else { 
    $('#div1').height(200); 
    $('#div3').height(200); 
}

來源

2011-07-06 02:14:29

獲取三個div以在中間內容中的內容發生變化時自動調整大小

回答

相關問題