Question

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

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

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

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

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

在我目前的努力阶段，问题是主图像不能填充100％的容器（100％，减去侧边栏的300px）。我还需要它来维持两个（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;
}

非常感谢您的帮助

Answer 1

我的建议是让你拥抱一个完全响应的布局。找到父元素的％宽度，该宽度近似表示右列的宽度。除了％的宽度和边距外，只使用％，并确保所有这些的总和等于100％。例如：

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

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

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

Answer 2

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

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

会强制您的图片覆盖其容器的55％。

Answer 3

我设法解决了问题，问题是<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;   
}

CSS宽度100％ - X px

3 个答案: