html - 防止子 div 拉伸(stretch)

Question

我有以下 html 代码:

<div class="panels">
    <div class="info-panel" id="heatmap-panel">
        <div class="panel-wrapper">
            <div class="panel-header"><h4>Metrics</h4></div>
            <div class="heatmap-layer-switcher">
                <label><input type="checkbox">Population</label>
            </div>
        </div>
    </div>

    <div class="info-panel" id="objects-panel">
        <div class="panel-wrapper">
            <div class="panel-header"><h4>Objects</h4></div>
        </div>
    </div>
</div>

使用以下 CSS:

.panels {
    float: right;
    margin-top: 35px;
    margin-right: 10px;
}

.info-panel {
    position: relative;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius: 7px;
    background-color: rgb(128,128,128);
    background-color: rgba(128,128,128,0.2);
    color: #5b5b5b;
    width: auto;
    height: auto;
    display: none;
}

.panel-wrapper {
    margin: 10px;
}

#heatmap-panel {
    margin-top: 10px;
}

#objects-panel {
    margin-top: 10px;
}

因此，当隐藏“Metrics” block 时，我有 block “Objects”具有正常宽度，但在“Metrics”可见后，它会将父 .panels div 和“Objects”div 拉伸(stretch)到其宽度。

如何防止“Objects”div 被“Metrics”div 拉伸(stretch)并将其 float 到父 .panels div 的右侧？

UPD:我希望结果像

Answer 1

“对象”元素需要单独的类/ID，因为您需要以不同方式定位它。

.panels {
    width:35%;
    margin-top: 35px;
    margin-right: 10px;
}
.info-panel {
    float:left;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius: 7px;
    background-color: rgb(128, 128, 128);
    background-color: rgba(128, 128, 128, 0.2);
    color: #5b5b5b;
    width: auto;
    height: auto;
    display: block;
}
.info-panel2 {
    float:right;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius: 7px;
    background-color: rgb(128, 128, 128);
    background-color: rgba(128, 128, 128, 0.2);
    color: #5b5b5b;
    width: auto;
    height: auto;
    display: block;
}
.panel-wrapper {
    margin: 10px;

}
#heatmap-panel {
    margin-top: 10px;
}
#objects-panel {
    margin-top: 10px;
}

这是 jsfiddle: http://jsfiddle.net/wdws1p64/