親の幅を均等に共有するように子divのサイズを自動的に調整する

固定幅の320pxの親divがあり、子供に任意の量の子を追加できるようにしたいと思っていますdivsを親に渡し、親の幅を共有するように自動的に調整させます。親の幅を均等に共有するように子divのサイズを自動的に調整する

親の幅を変更したくない場合や、スクロールオーバーフローを起こしたくない場合もあります。親の幅に均等にフィットするdivが必要です。例えば

、

唯一の子がある場合は、私がやって行くだろうどのように2そして、その幅は50％で、それぞれなど

があるならば、幅は、100％この？

私はこの多くのさまざまな方法にCSSでアプローチしましたが、それを理解できないようです。私はこれが何らかのjavascriptで行われなければならないと仮定していますが、私はそれを取り除くのに十分ではありません。

しかし、もしそれがちょうどCSSで行うことができれば、それは素晴らしいでしょう。

ありがとうございます。

（あなたがこれを知っておく必要があります場合には分からないのですが、子のdivにテキストを持っていません彼らは、背景色と固定高さだけ空白です。）

例コード：

CSS

.box { 
margin: 10px; 
background: white; 
border-radius: 6px; 
border: 1px solid darken(white, 12%); 
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); 
-moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); 
box-shadow:   0px 1px 4px rgba(50, 50, 50, 0.07); 
float: left; 
} 

.line { 
height: 6px; 
opacity: 0.4; 
-moz-opacity: 0.4; 
filter:alpha(opacity=4); 
margin-bottom: -1px; 
float: left; 
}

HTML

... 

<div class="box"> 
<div class="line">&nbsp;</div> 
</div> 

... 

#will be able to add any amount of .lines

出典

2012-02-26 ttyelud

ブラウザが[CSS3 flexbox]（http://www.w3.org/TR/css3-flexbox/）を実装すると、これは簡単になることに注意してください。 – Neil

使用display: table（および同じ幅の列が必要な場合はコンテナの固定幅を持つ）、コンテナの場合はdisplay: table-cell、子要素の場合はdisplay: table-cellです。

出典

2012-02-26 21:20:02

これはうまくいっていますが、.lineを表のセルとして表示する場合、最小の高さがあります（私の場合は15pxです）。私は 'height：20px'を追加することができますが、それはうまく動作しますが、' height：6px'は動作しません。 – ttyelud

子要素には特に文字（ ' '）を入れないでください。その後、高さはゼロになるはずです。 –

これは完全に機能します。 – ttyelud

これが役に立ちます。

<html> 
<body> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script tye="text/javascript"> 
function resizeChildren($div){ 
    var $children = $div.children(".child"); // Change .line to the appropriate class of the children 
    var $count = $children.length; // Determine how may children 
    var $width = $div.width(); // Get width of parent 
    var $cellwidth = Math.floor($width/$count); // Calculate appropriate child width 
    $children.width($cellwidth); // Apply width 
} 

function addChild($div, $html){ 
    $($html).prependTo ($div); // Add a new child 
    resizeChildren ($div); // Call the resize function 
} 

$(document).ready(function(){ 
    $("#add").click(function(){ // When <a id="add" is clicked... 
     addChild($(".parent"), '<div class="child">Random...</div>'); 
     return false; 
    }); 
}); 
</script> 

<style type="text/css"> 
.parent { 
    width: 500px; 
    border: 1px solid #000; 
} 

.child { 
    float: left; 
} 
</style> 

<div class="parent" style="width: 500px;"> 
    <div class="child">Random...</div> 
<br clear="all" /></div> 
<a href="#" id="add">Add DIV</a> 

</body> 
</html>

出典

2012-02-26 21:43:09

一部のブラウザでは、そうでない場合は、その高さは1EMになり、また、必要高さが1EMを下回っているDIVを表示するfont-size:0pxを支配します。私は私の答えを書いていた一方で

EDIT

は、より多くの情報が来ました。そのテーブルレイアウトが機能している場合は、最後のコメントへの答えが上です。私はあなたの質問をも忘れてしまったので、ポジショニングを考慮して私の答えの一部を削除しました。

出典

2012-02-26 21:45:02 Teemu

親の幅を均等に共有するように子divのサイズを自動的に調整する

答えて

関連する問題