兩個一個VS浮動保證金

-1

旁邊浮動的div我要創建這種佈局:兩個一個VS浮動保證金

------------------ ------- 
| div header | | div | 
|________________| |  | 
_________________ | p | 
|    | | a | 
|    | | n | 
| div content | | e | 
|    | | l | 
|________________| |_____|

它放在div容器。但問題在於面板div與內容div相同。有我的代碼：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;"> 
    <div id="header" style=" border: thin solid; float: left; margin-bottom: 20px; width: 930px; height: 150px;"> 
    </div> 
    <div id="content" style="border: thin solid; float: left; width: 930px; min-height: 1330px;"> 
    </div> 
    <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit"> 
    </div> 
</div>

我試圖尋找回答有，但沒有成功。我嘗試組合float，清除和顯示參數，但沒有結果。我得到最終的佈局，只有當我交換divs的順序並在content div之前獲得面板div時，但是這種改變不可能在面板div中使用繼承高度。我需要根據容器的面板div高度（容器div高度由content div和header div自動調整）。接着，容器高度是自動僅當我設置浮動PARAM但餘量PARAM變得不可操作。有人可以幫我解決這些問題嗎？

來源

2014-02-05 JARDA001

試試這個code

訣竅是使用

display:table

和

display: table-cell

有了這個解決方案沒有重要的＃內容內容側邊欄將有正確的高度

來源

2014-02-05 14:22:33 ppollono

是啊，這似乎對我的期望。我試過顯示錶格和表格單元格參數，但顯然不正確。非常感謝。 – JARDA001

編輯：你能幫助我多一件小事？當我嘗試讓面板內容到面板的div內容不從頂部邊框，但它顯示像應用邊距PARAM或面板DIV應用於填充頂元素。它也表現在你的鏈接中。在面板div或內部元素上應用的顯示參數沒有解決問題。 – JARDA001

http://jsfiddle.net/ppollono/e9HJ3/5/這是你的意思嗎？ – ppollono

只需重新排序的div因此面板來之前的內容：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;"> 
    <div id="header" style=" border: thin solid; float: left; margin-bottom: 20px; width: 930px; height: 150px;"></div> 
    <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit"></div> 
    <div id="content" style="border: thin solid; float: left; width: 930px; min-height: 1330px;"></div> 
</div>

jsFiddle example

來源

2014-02-05 14:06:57 j08691

你可以嘗試在自己的div包裹的兩個左的div：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;"> 
    <div id="wrapper" style="float: left; width: 930px;"> 
     <div id="header" style="border: thin solid; margin-bottom: 20px; width: 930px; height: 150px;"></div> 
     <div id="content" style="border: thin solid; min-height: 1330px;"></div> 
    </div> 
    <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit"></div> 
</div>

我也建議使用display: inline-block;代替float。行爲稍有不同，但是，如果我理解正確，這將解決您使用容器div的自動高度所遇到的問題。

來源

2014-02-05 14:12:09 Connell

JSFiddle!

<div class="container"> 
    <div class="leftside"> 
     <div class="innertop"> 
     Blah! Blah!! 
     </div> 
     <div class="innermid"> 
     Blah! Blah!! 
     </div> 
    </div> 
    <div class="rightvertical"> 
    </div> 
</div>

你可以先做你想要的頁面，顯然裏面我的jsfiddle例如，一旦你得到了不同的垂直劃分的更清晰的認識的豎格，那麼你可以把裏面的其他部門，這其方式更具體，並且不太可能突破。

在一個旁註，儘量不寫每一個CSS內聯，只有那些真正微不足道或真的很重要，而無需使用臭名昭著的越權「重要！」標籤

來源

2014-02-05 14:27:50

兩個一個VS浮動保證金

回答

相關問題