div 列布局，最小宽度的可拉伸列答案

【问题标题】：div column layout, stretchable column with min-widthdiv 列布局，最小宽度的可拉伸列
【发布时间】：2014-03-08 14:02:53
【问题描述】：

我正在尝试编写这个 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。

【问题讨论】：

你想用 css 实现这一点，还是你愿意接受其他解决方案？
理想情况下的 css ... 怎么办？ Javascript？或者也许我应该改用一张桌子？我愿意接受任何解决方案:)
我使用了一个 100% 宽度的表格，并在两列中设置了最小宽度，现在它完全符合我的要求......我仍然很想知道是否有办法做只使用 css

标签： html css layout

【解决方案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>

【讨论】：