3

タイトルが示すように、フロートを失うことなくCSSグリッドを作成する必要があります。これは、 WaypointsJSプラグインに干渉するためです...

とにかく、私は偶然見つけましdisplay: inline-block;たが、グリッド内のボックスがコンテナの幅の100％を占める場合、これはすべてのコードを1行に記述した場合にのみ機能します（JSFiddle 1）

私のプロジェクトはテンプレートであるため、ユーザーにすべてのコードを1行で記述するように強制することはできません。

この問題を解決する方法はありますか？

Udate 1：

white-space: nowrap;要素内のすべてのテキストを台無しにするため、どちらも役に立ちません（JSFiddle 2）

Udate 2：

親要素にもテキストが必要なため、この font-size: 0;ソリューションは役に立ちません

4

2 に答える 2

5

アップデート：

jsFiddleの実例。

親要素にafont-size: 0;を設定してから、それを含む要素の目的のサイズに戻すと、問題が修正されます。vertical-align: top;また、含まれている要素で必ず使用して、等しくないテキスト行が両方とも上部の同じ位置から始まるようにしてください。

注：2つのdivを同じ高さに表示する必要がある場合（背景色、画像などのため）、フェイクカラム手法を使用する必要があります。

.left {
    background: red;
    height: 140px;
    width: 55%;
    margin: 0 5% 0 0;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
.right {
    background: orange;
    height: 140px;
    width: 40%;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 0;
}

divにテキストが含まれていない場合の修正：

jsFiddleの実例。

white-space: nowrap;セクションルールに追加します。

section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    white-space: nowrap;
}

white-spaceプロパティの詳細については、http ：//www.quirksmode.org/css/whitespace.htmlを参照してください。

于 2013-02-11T23:17:39.220 に答える
1

CSS Tricksには、使用時に余分な空白を削除するための優れた記事がありますinline-block

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-10-20T06:46:21.783 に答える