14

レイアウトで現在直面している問題を示すために、サンプル jsfiddle を用意しました。コンテンツを特定の要素 (ブリック) に動的に挿入すると、要素が親と一緒に沈んでしまい、理解できない方法でHTML/CSSの。コンテンツを削除すると、Chrome を使用していない限り、元のレイアウトが復元されます。新しいコンテンツが挿入されると、その位置が保持され、再び倒れます。

概念実証: http://jsfiddle.net/GADk9/

この例のチェックボックスは、ブリック内のテキストを切り替えるだけで、それ以上のものはありません。上記の余白（ですか？）はどこから来ているのだろうか。

完全な HTML5 ドキュメントは次のとおりです。

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>HTML5 Falling Brick - What is this?</title>
<style>
#brick {
    background-color: lightgray;
    border: solid black medium;
    border-radius: 1em;
    color: red;
    font-size: 2em;
    height: 100%;
    text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }
</style>
</head>
<body>
    <div>
        <label>Click me twice
            <input onchange="document.getElementById('brick').innerHTML = this.checked ? 'FALL!!!' : ''" type='checkbox'></input>
        </label>
    </div>
    <div id='pit'>
        <div>
            <div>
            </div>
        </div>
        <div id='contrail'>
            <div>
                <div id='brick'></div>
            </div>
        </div>
    </div>
</body>
</html>

アップデート

私の質問をもう一度読んだ後、私が実際に達成しようとしているのはHTMLの修正であるという誤った印象を示唆している可能性があることに気付きました。この点を明確に強調するために、ここでは何も変更する必要はありません。レンガの例は、私が観察している問題の面白いデモです。このような配置でコンテンツが挿入されたときに、要素の位置が変化する原因を理解することに非常に興味があります。

4

10 に答える 10

4

あなたが持っている

<div id='pit'>
    <div>
        <div>
        </div>
    </div>
    <div id='contrail'>
        <div>
            <div id='brick'></div>
        </div>
    </div>
</div>

そして、あなたは使用しています

#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }

これが私たちの問題です。これ#pitはテーブルであり、毎回#pit>*追加されるテーブルセルです。height: 4em;

ここに私の解決策があります。

#pit { display: block; }
#pit>* { display: table; }
#pit>*>* { height: 4em; display: table-cell;}

http://jsfiddle.net/AAbhishekk/GADk9/28/

于 2013-05-01T03:03:25.323 に答える
1

これは、マークアップを単純化して、それぞれが div を含むいくつかのセルにすると理解しやすくなります。

<div class="cell left">
  <div class="inner"></div>
</div>
<div class="cell middle">
  <div class="inner"></div>
</div>
<div class="cell right">
  <div class="inner"></div>
</div>

次に、このような CSS を使用して、各 div に異なる高さを割り当てます。

.cell {
  display:table-cell;
  background-color:black;
  width:200px;
}

.inner {
  background-color:silver;
}

.left .inner {
  height:80px;
}
.middle .inner {
  height:140px;
}
.right .inner {
  height:100px;
}

デフォルトでは、これらの内側の div はベースラインに対して垂直に配置されます。したがって、テキストがない場合、すべての div はセルの下部に沿って配置されます。

       +--------+
       | | | |
       | | +--------+
+--------+ | | |
| | | | | | | |
| | | | | | | |
+------+------+------+

ただし、それらのいずれかにテキストを追加すると、その div が押し下げられ、テキストの最初の行のベースラインが他の div の下端と一致するようになります。

       +--------+
       | | | |
       | | | |
+--------+ |      
| | | | +--------+
| | | | |テキスト |
+------+------+ |
              | | | |
              +--------+

他の人が指摘したように、別のvertical-alignプロパティを設定することで何が起こるかを変更できます。たとえば、 .cellvertical-align:topセレクターに追加すると、次のようになります。

+------+------+------+
| | | | |テキスト |
| | | | | | | |
+--------+ | | |
       | | +--------+
       | | | |
       +--------+

コードペンでこの種のことをいじるのが最も簡単だと思います。ここでは、変更を加えたときに変更を確認できます。実験する例を次に示します。

于 2013-05-03T13:53:13.303 に答える
1

これは私が思いつくことができる最高のアイデアです。うまくいくか、それに少しでも近づくことを願っています。
CSS ルールには次のものがあります。

#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }

これはブラウザに、それ#pitがテーブルであり、そのすべての子がセルであることを伝えます (一方、表示は CSS によって強制されていないため、孫はそのままです)

ここに2つの問題があります：

問題1

内部#pitには次のものがあります。

<div>
    <div>
    </div>
</div>
<div id='contrail'>
    <div>
        <div id='brick'></div>
    </div>
</div>

2 つあるため、子に注意してください。セレクターに#pit>*は、すべて#pitの子 がこの CSS ルールを変更すると表示されます。

#pit { display: table; }
#pit>#contrail { display: table-cell; }
#pit>#contrail>* { height: 4em; }

ただし、これにより、#pit>#contrailインナーチャイルドではなく、4em の高さの子供が作成されるため、必要なものに注意してください。これが必要な場合#brickもありますが、注意してください。

問題 2 @ Chrome (最初の問題を「解決」した場合は存在しません)

ここで何を言っているのかよくわかりませんが、これは webkit のバグでしょうか? これはOperaでも起こりますか？
編集: Opera は Chrome のように動作せず、通常のレイアウトに戻るので、Webkit のバグではないかもしれません :/

テーブルとテーブルセルがありますが、ブラウザは「待ってください...これがテーブルで、これがセルなら...行はどこですか!?」と考えます。、だから幸せになれるように「幽霊列」を作ります。ただし、テキストが正常に「機能」するため、テキストを削除したときに「それ」がどう思うかはわかりません。開発者ツールを見ると、実際の行要素などがないことがわかります。
テキストを「再追加」すると、テーブル レイアウトが原因でブラウザが気になります。#pitそのため、おそらく「ゴースト行」がクリアされていないか、または#pitの高さが再計算されず、ゴースト行が生成されたときにのみ増加するため、行が再度作成されます (ストレッチ)。

同じ CSS ルールを残したい場合は、次のようにする必要があります。

#pit { display: table; }
#pit>* { display: table-row; }
#pit>*>* { height: 4em; display: table-cell; }
于 2013-04-24T01:38:16.917 に答える
0

chrome は、display:table-cell が display:table 内にあり、display:table-row が中間にないことに満足していないようです。

それを追加すると（そしてブリックに幅を与えると）、落下が止まります：

#brick {
    background-color: lightgray;
    border: solid black medium;
    border-radius: 1em;
    color: red;
    font-size: 2em;
    height: 100%;
    width: 200px;
    text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-row; }
#pit>*>* { display: table-cell; }
#pit>*>* { height: 4em; }
于 2013-04-24T01:38:21.610 に答える
0

奇妙なルールがあったと思います：

#brick {
    background-color: lightgray;
    border: solid black medium;
    border-radius: 1em;
    color: red;
    font-size: 2em;
    line-height:2em;
    height: 100%;
    text-align: center;
    margin:0;
    padding:0;
    height:2em;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }

http://jsfiddle.net/GADk9/77/

于 2013-05-02T21:25:08.170 に答える
0

回答: html/css レイアウトの組み合わせは公式の仕様に合わせてフォーマットされていないため、ブラウザはそれを認識できません。不適切にフォーマットされた HTML は、ブラウザーに要素を不適切に表示させます。

表のセルには、親表の行が必要です:

http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element

テーブル セルは、テーブル要素の直接の子要素として許可されていません。

http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element

于 2013-05-03T15:16:21.663 に答える