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达到某个最小宽度，我就不会让右侧面板开始隐藏。原因是，如果我的用户有一个小显示器，我想确保他们可以整个leftPanel。

Answer 1

我将左侧面板内的右侧面板移动并向右浮动。然后在左侧面板上设置最小宽度。因此，当它达到800px时，右侧面板消失...请参阅此处的示例：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 个答案: