html - CSS 宽度 100% - X px

Question

我需要一个具有固定右列的流畅布局，我尝试使用 this作为指南，但我无法按照自己的意愿使用它。

问题是主图像没有 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://example.com/main.jpg">
    </div>

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

        <div class="product">
            <img src="http://example.com/200x200.jpg" title="Product 01" alt="Product 01">
            <p>Product 01</p>
        </div>
                
        <div class="product">
            <img src="http://example.com/200x200.jpg" title="Product 03" alt="Product 03">
        </div>

        <div class="product">
            <img src="http://example.com/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%