0

私はこれの初心者です-ここに私の問題があります:

ファウンデーション4.0.8で1/3/2/3のレイアウトを作ろうとしています。(全体がレスポンシブである必要があります) モバイルでは、次のようになります: 1 つの画像 - 2 つの小さな画像 - 1 つの画像。

デスクトップ レイアウト:

これまでの私のアプローチ: 適切なグリッド設定で div を作成 -> 2 つ目の div を大規模な 12 グリッドで挿入し、その内部に画像を挿入します。

これまでのところは良いのですが、今は画像に苦労しています。ラージ 4 の div は、他の div と同じ高さではありません。:(

HTML:

<div class="row">
  <div class="large-8 small-12 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-4 small-6 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-4 small-6 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-8 small-12 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
</div>
4

1 に答える 1

0

これは、各グリッド要素の実際のコンテンツが高さと幅（コンテンツ領域）を制御するためです。私が何を意味するかを理解するには、各img要素をaに置き換えてpanel、さまざまなテキストを記述します。各パネルの高さが異なることがわかります。次に例を示します。

<div class="row">
      <div class="large-8 small-12 columns">
          <div class="large-12">
              <div class="panel">
                  <p>Chocolate cake jujubes donut pudding. Jujubes gummies soufflé topping chupa chups chocolate cake. Halvah carrot cake icing dragée. Donut caramels lemon drops cupcake. Pudding sugar plum lemon drops sesame snaps icing dessert. Tootsie roll caramels chupa chups marzipan sweet roll wafer. Jelly-o icing lemon drops cake chupa chups marshmallow bear claw. Oat cake bonbon tiramisu bonbon. Chocolate bar tart ice cream macaroon cake dragée gingerbread.</p>              
                </div>
          </div>
      </div>
      <div class="large-4 small-6 columns">
          <div class="large-12">
              <div class="panel">
              <p>Caramels tiramisu liquorice. Chocolate faworki brownie dragée wafer. Lemon drops tart bear claw wafer. Tootsie roll candy canes faworki lollipop bear claw bonbon sesame snaps jelly-o.  Danish sesame snaps toffee lollipop tootsie roll. Macaroon lollipop jelly-o pie gummi bears danish gummies jelly-o gingerbread. Pie croissant jujubes lollipop fruitcake icing. Fruitcake sweet roll cotton candy halvah gummi bears oat cake powder. Danish pudding toffee wypas bonbon macaroon lollipop faworki tiramisu.</p>
                </div>
          </div>
      </div>
      <div class="large-4 small-6 columns">
          <div class="large-12">
              <div class="panel">
              <p>Biscuit marshmallow wypas tootsie roll tart candy icing. Halvah faworki danish brownie chocolate cake candy. Carrot cake cotton candy donut lollipop pie oat cake. Sweet toffee pudding soufflé marshmallow donut chocolate bar. Gummi bears gummi bears brownie halvah cookie liquorice biscuit tart. Halvah cupcake tiramisu jelly beans apple pie liquorice fruitcake jelly beans. </p>
                </div>
          </div>
      </div>
      <div class="large-8 small-12 columns">
          <div class="large-12">
              <div class="panel">
              <p>Sesame snaps marzipan sugar plum wypas soufflé danish. Candy jelly-o topping biscuit sesame snaps gingerbread chocolate soufflé chupa chups. Jelly marshmallow wypas apple pie candy canes halvah cake. Ice cream biscuit icing jujubes lemon drops. Marshmallow biscuit cotton candy muffin. Bear claw pudding cookie. Soufflé jujubes gummi bears jujubes muffin. Wafer croissant marzipan apple pie tootsie roll jelly beans tootsie roll pudding.</p>
                </div>
          </div>
      </div>
    </div>

これで、すべての画像の高さを同じにしたい場合は、各imgにクラスを追加して、そのように言ってから、次のgrid-imgよう<img src="http://placehold.it/800x300" class="grid-img">に定義できます。

.grid-img {
    height: 150px;
    width: 100%;
}

画像は、グリッドの最大幅（8列など）と高さ（150ピクセルなど）に引き伸ばされるため、歪んで表示されない場合があることに注意してください。ここで、画像のサイズ変更ツールが役立ちます。

于 2013-03-21T02:15:10.467 に答える