html - 带有 float 元素的 div 的 Css 动态宽度

Question

我需要父 div 在开始时为 300px，每次用户单击一个按钮时，另一个 div 会插入到父 div，所以我需要他动态增长。我该怎么做？

<div class="parent">
     <div class="child"></div>
</div>

.parent {
     width:300px;
}

.child {
     width:280px;
     float:left;
}

Answer 1

您可以使用 min-width 或完全保留 width。

<div class="parent">
    <div class="child"></div>
</div>

<a href="#" id="add">ADD</a>

<style>
.parent {
    width: 300px;
    background: red;
    overflow: hidden; /* clear after floating children elements */
}

.child {
    width: 280px;
    float: left;
    height: 20px; /* I set a height here just for this example, because children elems are empty with 0px height */
    background: green
}
</style>

<script>
$('#add').click(function(){
    var parent = $('.parent');

    parent.append('<div class="child"></div>');
    parent.css({width: (parent.width() + 300) + 'px'});

    return false;
});
</script>

http://jsfiddle.net/Lq9rw3o4/1/