0

我有一个具有固定右列的流畅布局，但我无法让它正常工作。

这是我的网站：（http://65.39.128.45/~jpretty/gallery/mimesis/test-product/为什么链接不能包含 IP？）

忽略左列，这无关紧要。将主要大图像视为内容，将相关图像视为右列。

我发现了这一点，并实施了它。它有所帮助但并没有完全解决它：

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

在我目前的努力阶段，问题是主图像没有填充 100% 的容器（100%，减去侧边栏的 300 像素）。我还需要它来保持两者之间的固定间距（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

我的建议是让您采用完全响应式布局。找到最接近右列宽度的父元素的 % 宽度。只使用 %'s 作为宽度和边距，并确保所有这些的总和等于 100%。例如：

在下图中，每个 * 代表布局总宽度的 5%。

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

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

于 2013-03-21T13:03:38.927 回答
0

这是因为你有这个 CSS 规则：

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

这会迫使您的图像跨越其容器的 55%。

于 2013-03-21T12:49:41.527 回答
0

我设法解决了这个问题，问题是它的<img>扩展方式<div>与教程中的扩展方式不同（http://www.dynamicdrive.com/style/layouts/category/C13/）。解决方案涉及将主图像包装在另一个中<div>所以HTML变成了这样：

<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 回答