格列布局，最小宽度

我试图代码这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

格列布局，最小宽度

回答

相关问题