将 JQuery append() 限制为父 div elment 的大小

Question

我创建了一个具有一定大小和边框的空

元素(实际大小无关紧要(。

现在我想创建一个 JS 函数，它在此框中插入多个单选按钮(在本例中为#b_id(。

但是，我的代码似乎并不关心其父元素的大小。它返回整个页面的元素。

问：如何使用滚动条将单选按钮的插入固定为#b_id的大小？

---

注意：这是一个示例代码。

function box_creator() {
$('#b_id').append(`<input type="radio">2</input><br>
<input type="radio">3</input><br>
<input type="radio">4</input><br>
<input type="radio">5</input><br>`);
};

.a {
border: 4px solid rgb(60, 131, 121);
height: 200px;
width = 800px;
}
#b_id, #c_id {
border: 4px solid rgb(60, 131, 121);
height: 100px;
width = 400px;
margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="a">   A   
<div class="b" id="b_id">
<div >LOG</div>
</div>
<div  class="c" id="c_id">
<div>TYPE</div>
</div>
</div>

Answer 1

更新您的css使用max-width而不是width。并添加overflow: auto;.在.a和#b_id, #c_id中更新此内容。

检查下面的代码。单击Create Box按钮添加radio buttons并检查输出。

function box_creator() {
$('#b_id').append(`<input type="radio">2</input><br>
<input type="radio">3</input><br>
<input type="radio">4</input><br>
<input type="radio">5</input><br>`);
};

.a {
border: 4px solid rgb(60, 131, 121);
height: 200px;
max-width=800px;
overflow: auto;
}
#b_id,
#c_id {
border: 4px solid rgb(60, 131, 121);
height: 100px;
max-width=400px;
overflow: auto;
margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="button" onclick="box_creator()" value = "Create Box" />
<div class="a"> A
<div class="b" id="b_id">
<div>LOG</div>
</div>
<div class="c" id="c_id">
<div>TYPE</div>
</div>
</div>