CSS寬度100％ - X px

我有一個固定的右列的流體佈局，但我無法讓它正常工作。CSS寬度100％ - X px

這是我的網站：（？爲什麼不能鏈接包含IP的）http://65.39.128.45/~jpretty/gallery/mimesis/test-product/

忽略左側列，這是無關緊要的。將主要大圖像作爲內容，將相關圖像作爲右欄。

我發現了這個，並且實現了它。它幫助，但並沒有完全解決它：

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

在在這方面我目前的階段，問題是，主圖像沒有填滿100％它的容器（100％減去300像素爲側邊欄）。我還需要它來維持兩個（30像素）之間的固定排水溝

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; 
}

提前感謝您的幫助

來源

2013-03-21 Bill

我設法解決問題，<img>沒有以教程（http://www.dynamicdrive.com/style/layouts/category/C13/）中的<div>的方式擴展。參與另一<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-21 13:00:42 Bill

它是因爲你有這個css規則：

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

強制您的圖像跨越其容器的55％。

來源

2013-03-21 12:49:41 ITroubs

是的，我知道，但如果你採取的關閉它仍然無法正常工作。 – Bill 2013-03-21 12:55:14

它現在的樣子怎麼了？ – ITroubs 2013-03-21 13:00:33

主要圖像需要跨越其列的100％（保存30像素的排水溝）無論如何，我只是把圖像換成了一個額外的div – Bill 2013-03-21 13:02:22

我的建議是你要擁抱一個充分響應佈局。找到緊密代表右列寬度的父元素的％寬度。使用除％之外的寬度和邊距，並確保所有這些的總和等於100％。例如：

在下圖中，每個*表示佈局總寬度的5％。

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

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

來源

2013-03-21 13:03:38 Michael

CSS寬度100％ - X px

回答

相關問題