2

コンテンツを動的に追加する Div があるレイアウトを作成しようとしています。この「親」divの高さを固定し、コンテンツが追加されると、必要に応じてdivが水平に成長するようにします。

これは、問題を切り分けるために作成したテスト HTML です。

<html>
<head>
  <link rel="stylesheet" href="styletest.css" />
</head>
<body>
  <div style="width:700px;overflow:auto">
    <div class="anio">
      <div class = "semestre">
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
      </div>
    </div>
  </div>    
</body>
</html>

ここではclass=floater、コンテナ div に入る7 つの div があります。class=semestreコンテナ div は、さらに div を追加すると水平方向に成長するはずclass=floaterです。これらはすべて、固定幅の div に入りoverflow-x:autoます。

cssとのいくつかの戦いの後、私は次のことを管理しました:

div.floater { 
    margin: 4px;
    width: 110px;
    height: 82px;
    border: 1px solid #ccc;
    display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{  
    white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
    margin-top: 5px;
    margin: 2px;
    height: 90px;
    border: 1px solid #ccc;
    min-width:98%;

}
div.anio{
    margin : 2px;
    border: 1px solid #ccc;
    min-width:98%;

}

だからこれはうまくいきました..divは水平になり、最も外側のdivでclass=floaterアクティベーションを引き起こしますが、divを含むコンテナdivは必要と思われるように成長しません(これは境界線で見ることができません成長している）。グーグルで検索した後、css プロパティの上に追加したり、それらをフローティングしたりするなどの提案されたソリューションをいくつか見つけましたが、どれも機能しませんでした。境界線は書式設定のみを目的としているため、これは小さな問題です。overflow-xclass=floaterwidth:automin-width:

私が抱えている市長の問題は、class=floaterdivにコンテンツを追加しようとすると、クレイジーになり、本来あるべき場所にとどまらないことです(コンテンツがない場合)。white-space:nowrapfloater クラスに追加して元に戻そうとしwhite-space:normalましたが、うまくいきませんでした。その後、私は凶暴になり、ランダムなことを試し始め、最初の問題をなんとか修正しましたが、何をしたかを忘れて、ステップ1 Dに戻りました。

正直に言うと、私は html/css に非常に慣れていないので、実際に学んでいます。したがって、この質問がすでに尋ねられている/回答されている場合は、私がそれを検索したと信じてください。英語も失礼します、頑張ってください。

お時間をいただきありがとうございます。

編集: リクエストにより、フィドル :D http://jsfiddle.net/UBYKy/1/ で、私の問題の両方を見ることができます。

編集 2: 両方の問題の解決策を見つけたと思います。最初のdisplay: inline-block問題については親divに追加して解決し、2番目の問題についてはvertical-lign:top(afshinが示唆したように)フロータークラスcssに追加しましたが、問題なく動作します。これが同じ問題を抱えている人の助けになることを願っています。

4

1 に答える 1

2

これを使えばいいと思います 

div.floater { 
 vertical-align:top;
 margin: 4px;
 min-width:110px;
 width: auto;
 height: 82px;
 border: 1px solid #ccc;
 display: inline-block; /*this to make the floaters go horizontal*/
}

デモ

于 2012-09-22T18:31:04.517 に答える