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

Question

我有父div标签，他必须是几个孩子div标签，我希望那些儿童标签放置水平。  count儿童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

  

display：inline-block;

会为你工作吗。

您可以将以下CSS用于父元素：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;