Javascript 根据子标记定义父div标记宽度（使用css）

我有父div标签，他必须有几个子div标签，我希望子标签水平放置。 count childrens div标记，不知道高级，在这方面，我不能用css设置宽度parent div标记，为此我使用js

var cnt = $("#parent div").length; // obtain children tags total count
var parent_width = cnt * 102 ;  // 100 is children tag width and 2 is left and right border sum : 100 + 1 + 1

$("#parent").css({
    width: parent_width+"px"
});




<div id="parent" style="height: 100px; background-color: #090">
    <div style="height: 100px; width: 100px; background-color: #009; border: 1px solid #ccc; float: left">
    </div>
    <div style="height: 100px; width: 100px; background-color: #009; border: 1px solid #ccc; float: left">
    </div>
</div>

var cnt=$（“#父div”）.length；//获取子标签总数
var parent_width=cnt*102；//100是子标签宽度，2是左右边框和：100+1+1
$（“#父项”）.css({
宽度：父项宽度+px
});

这是可行的，但我认为这必须在没有js的情况下实现，只有css，请告诉我如何实现？

解决方案：

HTML

<div id="parent">
    <div></div>
    <div></div>
    <div></div>
</div>​

结果：

解决方案：

HTML

<div id="parent">
    <div></div>
    <div></div>
    <div></div>
</div>​

---

结果：

您可以对父元素使用以下CSS：

#parent
{
  background-color:#090;
  height:100px;
  float:left;
}

这样，父级

div

将自动获得适当的宽度，以便子级可以放入其中

---

当然，如果希望子

div

元素位于同一行中，您还必须在其上指定float属性。

您可以对父元素使用以下CSS：

#parent
{
  background-color:#090;
  height:100px;
  float:left;
}

这样，父级

div

将自动获得适当的宽度，以便子级可以放入其中

当然，如果希望子

div

元素在同一行中，还必须在其上指定float属性

显示：内联块

我会帮你的

---

您可以对父元素使用以下CSS：

#parent
{
  background-color:#090;
  height:100px;
  float:left;
}

#父项{
高度：100px；
背景色：#090
显示：内联块；
}
#父级>div{
高度：100px；
宽度：100px；
背景色：#009；
边框：1px实心#ccc；
}

显示：内联块

我会帮你的

---

您可以对父元素使用以下CSS：

#parent
{
  background-color:#090;
  height:100px;
  float:left;
}

#父项{
高度：100px；
背景色：#090
显示：内联块；
}
#父级>div{
高度：100px；
宽度：100px；
背景色：#009；
边框：1px实心#ccc；
}

如果我正确理解了您的问题，那么您希望子元素

元素自动适应其父元素的大小。您可以通过在父

div

元素上设置

float

属性来完成此操作。如果我正确理解了您的问题，您希望子

元素自动适应其父元素的大小。您可以通过在父

div

元素上设置

float

属性来实现这一点。谢谢，但是如果children的总宽度小于窗口宽度，这是可行的，但是如果我们有40个children标记，每个标记的宽度为100 px，这就不起作用了。@Otariki:如果所有

div

元素都在同一行中，您的屏幕或父

div

元素必须足够宽。如果没有足够的空间，浏览器会自动将下一个元素放入下一行（这就是

float

属性的工作方式）。我希望我能正确地理解你的问题。我加上：空白：现在父标记上的RAP和问题解决了，谢谢谢谢谢谢，但是如果孩子的总宽度小于窗口宽度，这是可行的，但是如果我们有40个孩子标记，每个标记的宽度为100 px，这是不可行的。@Otariki:对于所有

div

元素都在同一行，您的屏幕或父

div

元素必须足够宽。如果没有足够的空间，浏览器会自动将下一个元素放入下一行（这就是

float

属性的工作方式）。我希望我能正确理解你的问题。我加上：空白：现在家长标签上的RAP和问题已解决，谢谢谢谢谢谢谢谢，但如果孩子的总宽度小于窗口宽度，但如果我们有40个孩子标签，每个标签的宽度为100像素，这不起作用。但您想在一行中显示所有40个子项，还是想将父项的宽度调整为子项行的宽度？我添加：空白：现在父项标记上的RAP已解决问题，谢谢谢谢谢谢谢谢，但如果子项的总宽度小于窗口宽度，但如果我们有40个子标记，每个子标记的宽度为100 px，则这不起作用。但您想在一行中显示所有40个子标记，还是想将父标记的宽度调整为子标记行的宽度？我添加：空白：父标记上的nowrap，问题已解决，谢谢