0

Zurb Foundation 4 と SASS で Web サイトを開発しています。

私のコードは次のようになります:

<div class="row">
   <div class="large-6 columns redbg"> content goes here... </div>
   <div class="large-6 columns greenbg"></div>
</div>

内部 div の両方に背景があります。30px の列ガターがあります。このガターを白にしたいです。内部 div の両方に親 div を追加し、それに列と large-6 クラスを適用するための可能な解決策。この方法のコードは次のようになります。

<div class="row">
   <div class="large-6 columns">
        <div class="redbg">  content goes here... </div>
   </div>
   <div class="large-6 columns">
        <div class="greenbg"> content goes here... </div>
   </div>
</div>

しかし、このソリューションを適用することで、デザインのためだけに 2 つの div を作成する必要があります。誰でもそれを行う方法またはより良いアプローチを案内してもらえますか?

また、片側（左または右）から列を折りたたむ方法を知りたいですか？

4

2 に答える 2

0

CSS を使用する方がはるかに簡単です。background-clipプロパティを使用すると、その名前が示すように、要素の背景の描画領域をクリップできます。

ファンデーションのとじ幅はパディングボックスの範囲内なので、そのcontent-box値を使用できます。

簡単な例を次に示します: http://jsfiddle.net/CA669/950/embedded/result/

于 2013-11-07T17:23:50.730 に答える
-1

行の背景を白にすることはできますか? そうすれば、溝は白くなります。

私が考えることができる他の方法は、あなたが現在それをどのように行っているかです。私は同様の解決策を取らなければなりませんでした。

于 2013-11-07T17:15:30.067 に答える