如何包裝和設置CSS屬性以實現描述的結果？

我正在開發，在一個視圖有三個面板的Web應用程序的圖像顯示：如何包裝和設置CSS屬性以實現描述的結果？

enter image description here

你應該使用哪個CSS屬性有底部面板得到相同的寬度上兩個面板在動態環境中結合？

編輯：對不起，我應該提到，我不能使用任何javascript。我需要一個純粹由CSS執行的解決方案。該標記是從我正在開發應用程序的Java代碼生成的，因此我無法直接訪問該代碼。

來源

2012-02-14 AndroidHustle

使用JavaScript或jQuery的 – Hadas 2012-02-14 12:41:07

這是脆弱的！這是很難解釋的。我有很多想法來處理這種場景，但我們無法解釋，我們無法爲您創建佈局。 – Murtaza 2012-02-14 12:42:24

您剛編輯過您的標記無法更改。你可以請張貼你的確切標記嗎？如果某些要求未得到滿足，也許你的佈局是不可能的。 – Zeta 2012-02-14 13:12:59

瞭解display:inline-block; ，float,position等顯示和定位選項的屬性。我只是猜想有一個像包裝的東西。

HTML：

<div id="wrapper"> 
    <div id="firstPanel">First panel <br/>width: 300px</div> 
    <div id="secondPanel"> 
     Second panel <br/> width: > 300px, thus min-width:300px; 
    </div> 
    <div id="thirdPanel"> 
     Third panel. <br/> width: First panel + second panel + margin(?) 
    </div> 
</div>

CSS：

#wrapper{ 
    display:inline-block; 
    /* a block element will take all width, so you have to use a specific width, 
    a floating or an inline element.*/ 
} 
#wrapper > div{ /* just for convenience */ 
    border:1px solid #000; 
    border-radius:3px; 
    margin:.2em; 
} 
#firstPanel, #secondPanel{ 
    /* to show both in the same row. float:left is also possible */ 
    display:inline-block; 
} 
#firstPanel{width:300px;} 
#secondPanel{min-width:300px;} 

/* if you use float:left above, you have to use */ 
#thirdPanel{clear:both;}

Demo

來源

2012-02-14 13:09:50 Zeta

我一直在尋找，忘記了'inline-block'。很好的答案。 – 2012-02-14 13:17:20

我從演示中看到，這絕對是生成我之後佈局的正確答案。不幸的是，由於框架中的「限制」，我無法將其應用到我的環境中。我已經足夠長時間地解決了這個問題（延續了兩週），我看不到適合我需求的答案，我將不得不以另一種方式來做。我感謝你的努力。 – AndroidHustle 2012-02-14 13:36:53

-1

讓你的第二個面板的寬度和你的第一個面板的固定寬度的增加，並將其應用到你的第三個DIV

var secondPanel = $('.secondPanel').width(); 
secondPanel = parseInt(secondPanel.substr(0,secondPanel.length-2)); 
secondPanel = secondPanel + 300; 
$('.thirdPanel').css('width',secondPanel);

試試這個代碼，它使用jQuery

來源

2012-02-14 12:52:52

這個問題被標記爲[tag：css]，OP也表示他希望使用CSS，而不是JavaScript。「我想用我的徒手殺死一個人，教我空手道！」〜「使用槍」 – 2012-02-14 13:02:45

@palsingh感謝Pal的回答。對不起，我忘記提到我無法使用JavaScript，我需要一個純粹由CSS執行的解決方案。 – AndroidHustle 2012-02-14 13:02:56

@Truth喜歡比喻.. =） – AndroidHustle 2012-02-14 13:05:22

如何包裝和設置CSS屬性以實現描述的結果？

回答

相關問題