格列布局，最小寬度

我試圖代碼這2列DIV佈局，我不能想辦法做我想做什麼？下面是代碼伸縮柱：格列布局，最小寬度

#prospectDetailMainWrapper div{ 
    border:1px solid purple; 
} 
#leftPanel{ 
    height:600px; 
    padding-right:266px; 
} 
#rightPanel{ 
    height:600px; 
    position:absolute; 
    right:0; 
    top:103px; 
    width:265px; 
} 

#prospectDetailMainWrapper .clear{ 
    height: 0; 
    font-size: 1px; 
    margin: 0; 
    padding: 0; 
    line-height: 0; 
    clear: both; 

} 

<link rel="stylesheet" type="text/css" href="../css/default/prospect_detail_mock.css"/> 

<div id="prospectDetailMainWrapper"> 
    <div class="primaryButtons"></div> 
    <div id="leftPanel"> 
     <div id="prospectInfoMain"></div> 
     <div id="prospectTabbedSection"></div> 
    </div> 
    <div id="rightPanel"> 
     <div id="prospectContactInfo"></div> 
     <div id="prospectCampainSource"></div> 
     <div id="prospectScreening"></div> 
    </div> 
    <div class="clear"></div> 
</div>

所以我想要的是有固定寬度的rightPanel和leftPanel伸展，這是現在正在工作......但棘手的部分是，我希望rightPanel不顯示時，瀏覽器窗口變小...所以如果我拖動瀏覽器窗口使其變小，一旦leftPanel達到一定的最小寬度，我就不會讓右面板開始隱藏。原因是，如果我的用戶有一個小監視器，我想確保他們可以將整個leftPanel。

來源

2009-09-30 hdx

，你想用CSS實現這一點，或者是你開放給其他的解決方案？ – Colin 2009-09-30 20:37:04

理想情況下，CSS ...如何？ JavaScript的？或者，也許我應該使用一個表呢？我打開任何解決方案:) – hdx 2009-09-30 21:40:39

我用了一個100％寬度的表格，並在兩列中設置最小寬度，現在它完全符合我的要求......我仍然很想知道是否有方法這樣做只使用CSS – hdx 2009-09-30 22:36:27

我移動了左側面板內的右側面板並將其右側漂浮。然後在左側面板上設置最小寬度。這樣當它到達800像素右側面板中消失了......看到這裏的例子：http://ahhh-design.com/stack.html

<html> 
<head> 
<style type="text/css">  
#prospectDetailMainWrapper div { 
border:1px solid purple; 
overflow:hidden; 
} 

#leftPanel { 
height:600px; 
background: yellow; 
min-width: 800px; 
overflow:hidden; 
} 

#rightPanel { 
height:600px; 
float:right; 
margin-top:103px; 
width:265px; 
background: #fff; 
} 

#prospectDetailMainWrapper .clear { 
height: 0; 
font-size: 1px; 
margin: 0; 
padding: 0; 
line-height: 0; 
clear: both; 
}   
</style> 
</head> 

<body> 
<div id="prospectDetailMainWrapper"> 
    <div class="primaryButtons"></div> 
    <div id="leftPanel"> 
     <div id="prospectInfoMain"></div> 
     <div id="prospectTabbedSection"></div> 


         <div id="rightPanel"> 
           <div id="prospectContactInfo"></div> 
           <div id="prospectCampainSource"></div> 
           <div id="prospectScreening"></div> 
         </div>  <!-- end right panel --> 

    </div><!-- END LEFT PANEL--> 
</div> 
</body>

來源

2009-12-01 05:12:33 Amanda

格列布局，最小寬度

回答

相關問題