0

ここで、ガターが固定された流体グリッドに関する複数の質問と回答を見てきました。また、同じ高さのフルイド幅の div 列についても多く見てきました。私は両方を同時にやろうとしていますが、具体的な解決策は見つかりませんでした。

私はそれを機能させることができましたが、私の解決策は少し「ハッキー」で不安定なようです。以下は、jsFiddle リンクを使用した私のマークアップです。これは、ガターを固定して同じ高さの流体幅の div を実現する安全な方法ですか、それともより良い解決策をお勧めしますか? 最近、セマンティクスを改善し、堅牢なコードを作成しようとしています...

**ブラウザーのサポートには IE9+ のみが必要です

jsフィドル

HTML

<div class="grid">
    <div class="grid_01">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="gutter"></div>
    <div class="grid_01">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

CSS

.grid {display:table; padding:20px;}
.grid_01 {
    display:table-cell;
    width:50%;
    padding:20px;
    border-top:4px solid #a085c6;
    background:#ffffff;
    -moz-box-shadow:0px 1px 1px 0px #717171;
    -webkit-box-shadow:0px 1px 1px 0px #717171;
    box-shadow:0px 1px 1px 0px #717171;
}
.gutter {width:20px;}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

私の最大の懸念は、空のガター div です。建設的なフィードバックをいただければ幸いです。

4

3 に答える 3

0

jbenjohnsonの答えを改善して、私は同じ結果を達成するためにしばらく時間を費やしました. コンテナ div で負のマージンを使用して、コンテンツを一般的なレイアウトに合わせて再配置し、内部のガター マージンをハーフサイズにして、全員を均等に配置します。

ここでの改善点は、jbenjohnson の回答と比較して、 を使用するグリッドでもflex-flow: wrap、マージンが右側で壊れないことです (これはレスポンシブ レイアウトにとって重要です)。

OP の HTML をクリーンアップして、煩わしいガター div を取り除きましょう。

<div class="grid">
    <div class="grid-cell">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="grid-cell">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

それでは、フレックスボックスを愛するいくつかを適用しましょう...

OP のような 20px のガターを使用しているため、余白は 10px と -10px の値です。

.grid {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px; // Optional, see NOTE 3
    padding-right: 10px;
}
.grid-cell {
    width: 50%; // that's not usually recommended, flex-basis is better.
    margin-left: 10px;
    margin-right: 10px;
}

JSフィドル

注 1 - これはハックではありません。W3C は、まさにこれらのケースに対する負のマージンの使用を明確に定義しています。これはおそらく、OPの質問に対する最も「準拠した」回答です。

注 2width -プロパティを削除して値と交換することもお勧めしflex-basisます。フレックスボックスのコンテキストでは、はるかに信頼性が高く予測可能です。Chris Coyierによる優れたGuide to FlexBoxの flex-basis のリファレンスを参照してください。

注 3 - 水平パディングがないと、グリッドはレイアウトの端に揃えられます (これは、特に固定幅のレイアウトではクールです)。OPのレイアウトをコピーするためにそれらを保持しました。

于 2015-10-16T17:14:11.230 に答える