Question

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

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

.parent {
     width:300px;
}

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

Answer 1

只需将其用于父类样式。

.parent {
min-width:300px;
width:auto;

}

Answer 2

在父级上使用css min-width属性。

.parent {
 width:300px;
}

Answer 3

您可以使用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/

Answer 4

尝试将此添加到您的CSS

.parent{ 
  min-width:300px; 
}

Css动态宽度为div与浮动元素

4 个答案: