CSS 너비 100 % - X px

Question

고정 된 오른쪽 열이있는 유동적 인 레이아웃이 있지만 제대로 작동하지 않습니다.

이 내 사이트이다 : (? 링크 IP의를 포함 할 수없는 이유) http://65.39.128.45/~jpretty/gallery/mimesis/test-product/

가 왼쪽 열을 무시는 무관합니다. 주요 큰 이미지를 내용으로, 관련 이미지를 오른쪽 열로 간주하십시오.

나는 그것을 발견하고 그것을 구현했다. 그것은 도움이 있지만, 확실히 그것을 해결되지 않았다

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

를이 노력에 내 현재의 단계에서, 문제는 컨테이너 (100 %이다의 메인 이미지가 100 %를 채우지 않는다는 것입니다 뺀 300 픽셀 사이드 바용).

<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

문제를 해결하려면 이 <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; 
} 

Answer 2

을 나는 또한

HTML 두 (30 픽셀) 사이에 고정 된 도랑을 유지하기 위해 필요 이 CSS 규칙을 가지고 있기 때문입니다.

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

이미지가 컨테이너의 55 %에 걸쳐있게합니다.

Answer 3

나의 제안입니다. 오른쪽 열의 너비를 가깝게 나타내는 상위 요소의 % 너비를 찾습니다. 너비와 여백에 % 대신 아무것도 사용하지 말고 모두 합계가 100 %가되도록하십시오. 예 :

아래 다이어그램에서 각 *는 레이아웃의 총 너비의 5 %를 나타냅니다. 당신이 벗고 경우

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

는

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