div列布局，具有最小寬度的可伸縮列

Question

我正在嘗試編寫此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達到某個最小寬度，我就不會選擇rightPanel開始隱藏。 原因是，如果我的用戶使用的是小型顯示器，我想確保他們可以使用整個leftPanel。

Answer 1

我將右側面板移到左側面板內，然后將其向右浮動。 然后在左側面板上設置最小寬度。 這樣，當像素達到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>

div列布局，具有最小寬度的可伸縮列

問題描述

1 個解決方案

解決方案1
1 2009-12-01 05:12:33

div列布局，具有最小寬度的可伸縮列

問題描述

1 個解決方案

解決方案1 1 2009-12-01 05:12:33

解決方案1
1 2009-12-01 05:12:33