1

width:90%(およびパディングの 10%) を持つコンテナーを作成しました。その中にはdisplay:inline、a を持つ 3 つの div があります。width:30%

これは望ましい効果をもたらしませんでした。3 つの div をコンテナーの 30% まで伸ばして、コンテナー全体を埋めたかったのです。

まず、レスポンシブなものを作成します。製品のレスポンシブ グリッドを作成するために、これらの div 内に最大幅で画像を配置するつもりです。

JSフィドル

ご覧のとおり、商品の div は単にテキストのサイズに合わせて拡大されていますが、商品の div を拡大してコンテンツ領域を埋めるようにしたいのです。

実際の例

CSS:

.shoppg #content{
  width:90%;
  margin-top: 60px;
  margin-left:5%;
  margin-right:5%;
}

.product{
width:30%;
display:inline;
}

HTML:

<div id="content">
      <div class="product">
        product 1
      </div>
      <div class="product">
        product 2
      </div>
      <div class="product">
        product 3
      </div>
</div>
4

3 に答える 3

1

これがあなたが探しているものです：

http://jsfiddle.net/abrdn/6/

基本的に、divに合うように充填するという要件を満たすために、それらをフロートさせる必要があります。

ただし、ここでの最終的な目標はレスポンシブデザインであるため、製品のdivに固定幅を指定する必要があります。そうしないと、ディスプレイが小さくなりすぎたときに、同じ行に配置されてから垂直に積み重ねられなくなります。このような...

http://jsfiddle.net/abrdn/10/

パーセンテージ幅を使用すると、単に一緒に押しつぶして小さくするのではなく、divが別の行に移動する方法に注意してください。

これを少し拡張しmin-widthて、パーセンテージで固定しwidthて埋めることができますが、最小幅に達したら、次のように新しい行に移動します。

http://jsfiddle.net/abrdn/12/

于 2012-10-15T18:53:09.367 に答える
1

浮くのを忘れただけ.product

.product{
    float:left;
    width:30%;
    display:inline;
}

要素を浮動させると、displayプロパティは役に立たなくなりますがdisplay:inline 、IE7 の問題が修正されます。

いくつかのリソース:

于 2012-10-15T18:48:56.973 に答える
1

display:inline-block;+ float:left;inline-block が奇妙なmargin/paddingをボックス モデルに追加するためです。しかし、 #contentの幅を 3 で割っているからといって、.productの幅があってはいけませんか? 33.33333%次にwidth:100%; height:auto; display:block;、画像に使用すると、一日中いっぱいになり、伸びます。

于 2012-10-15T19:23:39.677 に答える