0

理由もなく div 内に表示される水平方向の空白に問題があります。つまり、なぜそれが表示されるのか理解できません。意味がありません。

フィドルはこちら

レイアウトは 2 列にする必要があります。右に 1 つ、左に 1 つ、後者の方が大きくなります。問題は、右側の div にコンテンツが定期的に表示され、すべての配置が適切に表示されていることです。左の方が内容が低めで、5pxくらいのパディングトップがあるように見えますが、パディングが全くありません。空白は、左側のテーブル セル div の内側にあります。これは、内部にプレーン テキスト ("Lorem ipsum") がある場合でも、テキストが右側の div 内のコンテンツよりも下に表示されるためです。

HTML コードは次のとおりです。

<div id="main_contents_cage">
    <div id="main_contents_left">
        <table> ... some content ... </table>
    </div>

    <div id="main_contents_right">
        ... some other content ...
    </div>
</div>

CSS は次のとおりです。

#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }

#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }

同じ問題を抱えている人を見つけることなく、同じ問題を抱えている他の人をインターネットとStackOvで検索しました。似ていますが、まったく同じではありません！

すべての要素に border-collapse/border-spacing を与えようとしました (それぞれ 1 回、次に「テーブル」要素のみ、次に「テーブルセル」要素のみ、次にそれらの 3 つ): 何もありません。

テーブルセルのdivの内容を変更しようとしましたが、結果は変わりませんでした（テーブルを他のdivに置き換えるか、プレーンテキストだけに....）。

誰でも何か考えがありますか？

4

3 に答える 3

1

この同じ問題が発生しました。私も table-cell 要素に「vertical-align: top」を割り当てることで問題を「修正」することができました。これは Chorme でのみ発生する問題のようです。私にとっては、それは右側の列のみでした（むしろ、あなたの例のように左側です）

于 2015-04-28T17:24:20.220 に答える
0

「main_contents_left」のクラスを持つ div のコンテンツには、子の行または孫のセルを含まないテーブル タグがあります。

興味があれば、ここに私のjsFiddleへのリンクがあります

于 2012-07-24T16:44:03.703 に答える
0

わかりました: 上部に余白がないようにコンテンツを表示するには、「table-cell」div に「vertical-align: top」を追加する必要があります。

私はフィドルでそれが機能することを知っていますが、CSSがなくても（必要なものだけ...）、Webページで実際に機能させることはできません。（FF13、クローム20）。

ありがとうございました

于 2012-07-24T16:48:41.197 に答える