javascript - 根据子标签定义父div标签宽度（使用css）

Question

我有父 div 标签，他必须是几个子 div 标签，我希望子标签水平放置。计算孩子的 div 标签，不知道高级，在这个上，我不能用 css 设置宽度父 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>

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

Answer 1

解决方案：

HTML

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

CSS

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

#parent​ > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
    float: left;
}​

结果：http: //jsfiddle.net/khEKS/

Answer 2

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

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

这样，父母div将自动获得适当的宽度，以便孩子可以适应它。

当然，div如果您希望它们在同一行中，您还必须在子元素上指定 float 属性。

Answer 3

显示：内联块；

会为你工作。

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

#parent { 
    height: 100px; 
    background-color: #090  
    display: inline-block; 
}

#parent > div {
    height: 100px; 
    width: 100px; 
    background-color: #009; 
    border: 1px solid #ccc; 
}

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