動態調整兩個外部列到中心列的可變寬度

我認爲自己是一箇中級/高級CSS/HTML編碼器，但是我很難理解如何執行以下場景..我開始思考這是不可能的，但我真的想相信這是..動態調整兩個外部列到中心列的可變寬度

比方說，包裝寬度是1000px。

其中有三欄。兩個外部列的寬度相同，該寬度由中心列決定。中心列是唯一一個帶有內容的列，只有一行文字，每邊都有30px的填充。因此，如果內容的線是100像素具有填充，比其它兩列將是（1000-100）/ 2的每個..

有一種動態的方式具有兩個外列調整到的變化的寬度由不同內容定義的中心列，一行文本？

圖形的什麼，我試圖完成：

2011-12-16 deflime

嗯..我只是想出了一個方法，用兩個divs，一個在另一個裏面......可能甚至比三列的想法更整潔一點。無論如何，這三列可能嗎？ – deflime 2011-12-16 06:08:55

這是您正在面臨的實際編程問題嗎？如果是這樣，考慮改寫你的問題，並向我們展示你可能已經嘗試過的任何東西（例如，你是否有一些基礎標記供我們使用？）。我們通常更喜歡關於編碼難題的實際問題。 – BoltClock 2011-12-16 06:10:06

我相信這篇文章涵蓋了你要找的內容：http://www.alistapart.com/articles/holygrail/ – David 2011-12-16 06:14:20

好「OLE表救援：

http://jsfiddle.net/hgwdT/

其實我覺得表是魔鬼，但是這可以作爲你描述。所以在這裏它是用在孩子的div display: table-cell，所以它使用更好的標記在功能上是相同的：

http://jsfiddle.net/XXXdB/

中心元素確實可以有一個動態的寬度;爲了防止內容被擠壓，我簡單地將white-space: nowrap添加到包含文本的p。

我也證實，此解決方案除了Chrome之外，還可以在IE8和FF中使用。

來源

2011-12-16 07:08:53 justis

非常接近我能想出是使用顯示：表;和表格單元格。這會創建你正在尋找的動態效果，但是我不認爲如果不爲中心元素設置明確的寬度，就可以得到你想要的效果。

HTML：

<div id="wrap"> 
    <div id="left"> 
     Left 
    </div> 
    <div id="center"> 
     center 
    </div> 
    <div id="right"> 
     Right 
    </div> 
</div>

CSS：

#wrap 
{ 
    width: 1000px; 
    display: table; 
} 

#wrap div 
{ 
    display: table-cell; 
    border: 1px solid #000; 
    width: auto; 
} 

#center 
{ 
    padding: 0 30px; 
    text-align: center; 
}

您可以check out my attempt here，它有一些按鈕，讓你看到不同的狀態，寬度開/關和添加文字等（jQuery的與解決方案無關）

我認爲這與您將用純CSS獲得的結果相近。

來源

2011-12-16 07:00:10 Kyle

這不是最優雅的解決方案，但它的工作原理。我想去純粹的CSS路線，但無法弄清楚。好的工作，jblasco和凱爾七橡樹，找出來！

這是我的jsFiddle demo。如果你不介意使用一些JavaScript雖然（利用jQuery的在我的例子）：

HTML：

<div id="wrapper"> 
    <div class="side"></div> 
    <div id="middle">One line of text.</div> 
    <div class="side"></div> 
</div>

CSS：

#wrapper { 
    margin: 0 auto; 
    width: 1000px;  
} 

#wrapper div { 
    float: left; 
    height: 300px; 
} 

.side { 
    background: #ddd; 
} 

#middle { 
    background: #eee; 
    padding: 0 30px; 
    text-align: center; 
}

的JavaScript：

var adjustSize = function(){ 
    // Declare vars 
    var wrapper = $('#wrapper'), 
     middle = $('#middle'), 
     totalWidth = wrapper.width(), 
     middleWidth = middle.width(), 
     middleOuterWidth = middle.outerWidth(), 
     remainingWidth = totalWidth - middleOuterWidth, 
     sideWidth; 

    if(remainingWidth % 2 === 0){ 
     // Remaining width is even, divide by two 
     sideWidth = remainingWidth/2; 
    } else { 
     // Remaining width is odd, add 1 to middle to prevent a half pixel 
     middle.width(middleWidth+1); 
     sideWidth = (remainingWidth-1)/2; 
    } 

    // Adjust the side width 
    $('.side').width(sideWidth); 
}

來源

2011-12-16 07:11:30 jackrugile

動態調整兩個外部列到中心列的可變寬度

回答

相關問題