Zurb Foundation 4 を初めて使用して、友人の小さな写真フォリオ サイトを構築しています。
テスト @ http://wagonbroadcastservice.org/ktest/
レイアウトは非常に単純で、画像のグリッドです。「ブロック グリッド」の使用は適切に思えましたが、私が遭遇した問題は、各画像を各行の上部ではなく中央に垂直方向に配置する必要があることです。そのために必要なコードを理解するのに問題があります。
私の質問に答えていると思われるスレッドを 1 つ見つけましたが、提案された答えはまったく機能していないようです。 Foundation ブロック グリッド クラスを使用して、画像を div の下部に揃えることができません
誰かが私が間違っているかもしれないことを知っていますか?
あなたの実際の「問題」は、このスタイルルールによって引き起こされます(app.css行1123):
[class*="block-grid-"] > li {
display: inline;
float: left;
height: auto;
padding: 0 0.625em 1.25em;
}
ルールセットを次のように変更してテストできます。
[class*="block-grid-"] > li {
display: inline-block;
height: auto;
padding: 0 0.625em 1.25em;
}
inline-block空白の問題など、他にもいくつかの欠点があります。要素間の不要なマージンを回避するには、次の 2 つの方法があります
。 1. HTML マークアップから空白と改行を削除します
。 2. 親要素のフォント サイズを「0」に設定します。
フレームワークを使用することが常に最善/最も簡単な解決策であるとは限りません! ;-)
そして、私は「Zurb Foundation 4」を知らないので、これ以上あなたを助けることはできません - 申し訳ありません.