Javascript 使父div与其子div一样大

我在父div中得到了一些div。父div应该只和它的子div一样大

这就是当前的观点

函数记录（id、标题、描述、内容、创建日期）{//对象
this.id=id；
this.title=标题；
this.description=描述；
this.content=内容；
this.dateOfCreation=创建日期；
this.lastdedited=创建日期；
}
函数init（）{
var elements=[]；//所有记录都存储在这里
对于（var i=0；i<3；i++）{//创建一些对象
元素。推送（新记录）(
我
“头衔”+i，
“说明”+i，
“内容”+i，
“日期”+i））；
}
$（元素）.each（函数（索引，currentRecord）{//创建div容器
var recordContainer=$（“”）；
addClass（“recordContainer”）；
$（document.body）.append（recordContainer）；
recordContainer.append（$（“”+currentRecord.title+“”））；
recordContainer.append（$（“”+currentRecord.description+“”））；
recordContainer.append（$（“”+currentRecord.dateOfCreation+“”））；
recordContainer.append（$（“”+currentRecord.lastEdited+“”））；
});
}
init（）；//调用例程

.recordContainer{
利润率：10px；
边框：实心；
边框宽度：1px；
边界半径：2px；
边框颜色：#e8e9e9；
盒影：1px 1px 1px#999999；
}

---

如果您需要将它们缩小但保持垂直堆叠，请使用

显示：表格

，请参见下面的代码片段

---

如果需要将它们缩小并放在同一行上（如果不再合适，可能会包裹），请使用

display:inline block

功能记录（id、标题、描述、内容、创建日期）{
this.id=id；
this.title=标题；
this.description=描述；
this.content=内容；
this.dateOfCreation=创建日期；
this.lastdedited=创建日期；
}
函数init（）{
var elements=[]；//所有记录都存储在这里
对于（var i=0；i<3；i++）{//创建一些对象
元素推送（新记录（i，“标题”+i，“描述”+i，“内容”+i，“日期”+i））；
}
$（元素）。每个（函数（索引、currentRecord）{
var recordContainer=$（“”）；
addClass（“recordContainer”）；
$（document.body）.append（recordContainer）；
recordContainer.append（$（“”+currentRecord.title+“”））；
recordContainer.append（$（“”+currentRecord.description+“”））；
recordContainer.append（$（“”+currentRecord.dateOfCreation+“”））；
recordContainer.append（$（“”+currentRecord.lastEdited+“”））；
});
}
init（）；//调用例程

.recordContainer{
利润率：10px；
边框：实心；
边框宽度：1px；
边界半径：2px；
边框颜色：#e8e9e9；
盒影：1px 1px 1px#999999；
显示：表格；
}

---

我做了一些更改，以改进语义和性能。问题是元素“DIV”默认为块元素，因此会占用整个水平空间

我希望这个解决方案能帮助你

函数记录（id、标题、描述、内容、创建日期）{//对象
this.id=id；
this.title=标题；
this.description=描述；
this.content=内容；
this.dateOfCreation=创建日期；
this.lastdedited=创建日期；
}
函数init（）{
var elements=[]；//所有记录都存储在这里
对于（var i=0；i<3；i++）{//创建一些对象
元素。推送（新记录）(
我
“头衔”+i，
“说明”+i，
“内容”+i，
“日期”+i））；
}
$（元素）.each（函数（索引，currentRecord）{//创建div容器
var recordContainer=$（“”）；
$（document.body）.append（recordContainer）；
$（“.container-”+索引）.append（“”+
“”+currentRecord.title+“
”+
“”+currentRecord.description+”
”+
“”+currentRecord.dateOfCreation+”
”+
“”+currentRecord.lastEdit+”
”；
});
}
init（）；//调用例程

.recordContainer{
显示：内联块；
保证金：0；
}
.集装箱{
边缘：0.5em；
填充：.5em；
边框：1px实心#中交；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
-网络工具包盒阴影：1px 1px 10px#ccc；
-莫兹盒阴影：1px10px#ccc；
盒影：1px10px#ccc；
}
.货柜{
文本对齐：居中；
}
.容器p:n个子容器（奇数）{
背景：#eee；
保证金：0；
填充：.3em.5em；
}

---

子容器不应大于其父容器。。您是否尝试过：

.recordContainer{display:inline block；}

噢，

display:inline block这是我错了，父div应该自动采用子div的维度。例如，一个空div是0x0，只有当您将内容放入其中时才展开。@只有当它是内联元素时，块元素才会占据全部可用宽度。把我的毛衣还给我。