1

私はレスポンシブ Web サイトに取り組んでいます。Web サイトの背景には目に見えるグリッド線があります。これと比較できます: http://fearonhay.com/ (背景の非常に柔らかい灰色の線)。しかし、それを解決するための最善の方法を見つけるのを少し難しくしている違いが 1 つあります。それは、Web サイトがレスポンシブ (% 幅) であるということです。

どのように見えるべきか、非常にラフなドラフトを作成しました。実際には、3 つの列だけでなく 4 つの列があります。

グリッド

意図したとおりに動作するかどうかをテストするために、簡単なフィドル（Chromeで見てください）を作成しました：http://jsfiddle.net/T76MK/

.lines {
    background-image: -webkit-linear-gradient(0, black 1px, transparent 1px);
    background-size: 25% 100%; 
}
.grid {
    margin-left: -30px; /* Gutter */    
}
.grid__item {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 30px; /* Gutter */
    vertical-align: top;    
}
.one-quarter { width: 25%; }
.red { background: red; }

ご覧のとおり、線に線形グラデーションを使用しましたが、2 番目と 4 番目の線は数ピクセルずれています。それらはガター内で適切に中央に配置されていません。3行目は問題ないように見えます。これを修正する方法はありますか？

前もって感謝します。

4

1 に答える 1

0

コードに多くの問題がありました...

これが私がすることです：
http://jsfiddle.net/T76MK/7/

質問: なぜここで二重アンダースコアを使用しているのですか? 良くない....grid__item

また、ガターが必要な場合 (負のマージンを使用してはいけません)、サイト/ページの残りの部分に他のコードの問題がある可能性があります。

于 2013-11-15T00:37:52.057 に答える