0

右側の列が固定された可変レイアウトを使用していますが、適切に機能させることができません。

これは私のサイトです: http://65.39.128.45/~jpretty/gallery/mimesis/test-product/(リンクに IP を含めることができないのはなぜですか?)

左側の列は無視してください。無関係です。メインの大きな画像をコンテンツと見なし、関連する画像を右側の列と見なします。

これを見つけて実装しました。それは役に立ちましたが、完全には修正されませんでした：

http://www.dynamicdrive.com/style/layouts/category/C13/

この取り組みの現在の段階では、問題は、メイン画像がコンテナーの 100% (100% からサイドバーの 300px を差し引いたもの) を埋めていないことです。2 つの間の固定ガター (30px) を維持するためにも必要です。

HTML:

<div class="imagecol portrait">
    <div class="mainimg">
        <img class="product_image" id="product_image_15" alt="Test Product" title="Test Product" src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url.jpg">
    </div>

    <div class="products_list clearfix related-products">

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/YugoslavianCamo-200x200.jpg" title="Product 01" alt="Product 01">
            <p>Product 01</p>
        </div>

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/animals-2-200x200.jpg" title="Product 03" alt="Product 03">
        </div>

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url-200x200.jpg" title="Test Product" alt="Test Product">
        </div>
    </div>
</div>

いくつかの CSS:

.single_product_display .imagecol{
    width:77%;
    float:right;
    margin:0;
}
.imagecol .mainimg{
    width:100%;
    float:left;
}
.imagecol .product_image{
    margin-right: 330px;
    cursor:default !important;
}
.imagecol.portrait .products_list{
    margin: 0px 0 0 -330px;
    float: left;
    width: 300px;   
}
.imagecol .products_list .product{
    margin:0 5px 5px 0;
    width: 145px;
    height: auto;
}

ご協力ありがとうございました

4

3 に答える 3

1

完全にレスポンシブなレイアウトを採用することをお勧めします。右の列の幅を正確に表す親要素の幅 % を見つけます。幅と余白には % のみを使用し、これらすべての合計が 100% になるようにしてください。例えば：

以下の図では、各 * はレイアウトの合計幅の 5% を表しています。

|****|*|**********|*|****|
|    | |          | |    |
|    | |          | |    |
|20% |5|    50%   |5|20% |
|    |%|          |%|    |
|    | |          | |    |
|****|*|**********|*|****|

20 + 5 =25 + 50 = 75 + 20 = 95 + 5 = 100%

于 2013-03-21T13:03:38.927 に答える
0

私はなんとかそれを解決しましたが、問題は、チュートリアル ( http://www.dynamicdrive.com/style/layouts/category/C13/<img> )と同じように展開しなかったことです。解決策には、メイン画像を別の画像でラップすることが含まれていたため、HTML は次のようになりました。<div><div>

<div class="imagecol portrait">
    <div class="imagecolwrapper">
        <div class="mainimg">
            <img class="product_image" id="product_image_15" alt="Test Product" title="Test Product" src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url.jpg">
        </div>
    </div>

    <div class="products_list clearfix related-products">

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/YugoslavianCamo-200x200.jpg" title="Product 01" alt="Product 01">
            <p>Product 01</p>
        </div>

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/animals-2-200x200.jpg" title="Product 03" alt="Product 03">
        </div>

        <div class="product">
            <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url-200x200.jpg" title="Test Product" alt="Test Product">
        </div>
    </div>
</div>

CSS は次のようになりました。

.single_product_display .imagecol{
    width:77%;
    float:right;
    margin:0;
}
.imagecol .imagecolwrapper{
    width:100%;
    float:left;
}
.imagecol .mainimg{
    margin-right: 330px;
}
.imagecol .product_image{
    width:100%;
    cursor:default !important;
}
.imagecol.portrait .products_list{
    margin: 0px 0 0 -300px;
    float: left;
    width: 300px;   
}
于 2013-03-21T13:00:42.413 に答える
0

これは、次の css ルールがあるためです。

.imagecol.portrait .product_image {
    width: 55%;
}

これにより、イメージがコンテナーの 55% にまたがるようになります。

于 2013-03-21T12:49:41.527 に答える