0

WordPress のテーマ / レイアウトの基礎として、Yahoo Pure CSS のレスポンシブ グリッドを使用しています。

http://smartwatchapps.co.uk/module-test/

画像のない列は問題ありません。画像が存在する場合、列は FF と Opera で展開されます。クローム/サファリOK。

これは、 http://purecss.io/grids/に従って、box-sizing:border-box と水平パディングを Pure ユニットに追加すると発生します。

/* Apply padding to Pure units
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pure-g > [class*="pure-u"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
img{
max-width: 100%;
height: auto;
display: block;
}

ピュア ユニットの box-sizing:border-box とパディングを削除し、ピュア ユニット内の div に追加すると、同じことが起こります。

幅の追加: 100% は FF と Opera のオーバーフロー画像を修正しますが、もちろんこれによりすべての画像がコンテナーの 100% 幅になります (たとえば、このページの OJ の小さな画像は、コンテナーの 100% を埋めるように拡張されます)。実行可能な解決策ではありません。

pure-g が別のページ内にネストされていない他のページでは発生しないようです。

http://smartwatchapps.co.uk/markup-image-alignment/

どんなアイデアでも大歓迎です。

4

1 に答える 1

1

float: left;コンテナのプロパティが動作を変えると思います。そして、あなたはそれを必要としないように見えるので、それを削除してください。

.content-block {
    float: left; /*get rid of this line*/
}

box-size paddingそして、適用などのデフォルトのグリッドを変更しないことは良い考えだと思いますmargin。いくつかの要素の周りに余分なスペースが必要な場合は、それらをコンテナに入れ<div>てプロパティを設定し、それをグリッドに入れます。

于 2015-03-19T22:18:03.043 に答える