1

ページにdivを水平に配置しています。事実上、それらはテーブル内の行のように見えます。ユーザーが div をクリックすると、高さが 120px から 240px に変更される場合があります。ここで問題が発生します。

div が展開されたら、「列」の他の部分を押し下げたいと思います。しかし、それは起こっていることではありません。

このJS Fiddleでは:

.tile { width: 300px; border: 1px solid black; height: 120px; margin: 8px; display: inline-block; }

<div id='outer'>
    <div class='tile'>Notice 1</div>
    <div class='tile'>Notice 2</div>
    <div class='tile'>Notice 3</div>
    <div class='tile'>Notice 4</div>
    <div class='tile'>Notice 5</div>
    <div class='tile'>Notice 6</div>
    <div style='background: red;' onclick='this.style.height="250px"' class='tile'>Notice 7</div>
    <div class='tile'>Notice 8</div>
    <div class='tile'>Notice 9</div>
    <div class='tile'>Notice 10</div>
    <div class='tile'>Notice 11</div>
    <div class='tile'>Notice 12</div>
</div>

...「行」全体の高さを増やします。(赤いタイルをクリックして効果を確認してください。結果ビューのサイズを変更して、さまざまなブラウザー幅で試​​してください)。

同じコードを (Firefox で) ネイティブに試すと、別の (それでも望ましくない) 効果が得られます。「セル」が展開されると、展開された「セル」の右端が後続の行の最も左端になるように、下の行が短縮されます。

JavaScriptでこれを行う方法を考えることができますが、できれば避けたいと思います.

4

3 に答える 3

1

float:left;タイルクラスを入れてみてください

于 2013-09-03T07:12:05.180 に答える