0

私は親の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のみで作成する必要があると思います。方法を教えてください。

4

3 に答える 3

2

解決：

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/

于 2012-09-09T12:39:11.267 に答える
1

親要素には次の CSS を使用できます。

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

そうすれば、親divは適切な幅を自動的に取得して、子がそれに収まるようにします。

divもちろん、子要素を同じ行に配置する場合は、子要素にも float プロパティを指定する必要があります。

于 2012-09-09T12:39:55.917 に答える
0

表示: インラインブロック;

あなたのために仕事をします。

親要素には次の 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>

于 2015-04-18T05:42:04.153 に答える