防止儿童拉伸

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”块时，我阻止了具有正常宽度的“Objects”，但在“Metrics”变为可见之后，它将父.panels div和“Objects”div拉伸到其宽度。

如何防止“对象”div被“Metrics”div拉伸并将其浮动到父.panels div的右侧？

UPD：我希望结果像

Answer 1

“Objects”元素需要单独的class / 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/

Answer 2

解决了将此类css添加到.info-panel

的问题

float: right;
clear: both;

http://jsfiddle.net/doa0t3rp/