부모 컨테이너의 너비를 채우는 동안 격자에서 사각형을 뜨는 CSS 기술

Question

제품을 표시 할 페이지가 있으며 각 페이지가 테이블 셀인 테이블 기반 레이아웃에서 페이지를 변환하려고합니다. 3 행씩, 일종의 동적 그리드로 불행히도, 인라인 블록을 사용하는 것은 "인라인 블록 사이에 문제가되는 공백을 유지하십시오"라는 문제로 인해 고통이며, 수레를 사용하는 것은 목록에 틈이 생기는 경향이 있습니다 (첨부 된 이미지 참조).

타일은 최대 및 최소 폭을 가지고, 그래서 폭포 또는 클립 타입 타일처럼 보인다 해야하지 필요한, 정말 가변 높이와 폭 사각형을 다루는 아니에요입니다.

따라서 기술은 이런 종류의 그리드 목록을 만들기에 최적의 공간이지만 정기적으로 사용 가능한 공간을 채우지 만 짧은 화면에서는 줄을 더 짧게 할 수 있습니까? http://www.shermanbrothers.com/catalog.php

Answer 1

기술은 액체 디자인이라고 또는 스마트 폰과 태블릿을 지원해야하는 경우, 다음은 '반응 형 디자인 "입니다 :

문제가 여기 페이지의에서 개발 예를 들어 있습니다.

시나리오에서 먼저 고정 폭 테이블을 액체 그리드로 전환해야합니다. 코드 조각은 다음과 같습니다

JsFiddle

CSS :

 * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

} 


.container { 
    width: auto; 
} 

    .container:after { 
     content: " "; 
     clear: both; 
     display: table; 
    } 


.tabletContainer { 
    /*The total width for the first two column*/ 
    width: 67%; 
    float: left; 
    display: block; 
} 



.left { 
    background-color: red; 
    float: left; 
    /*Each column takes have of the container size, so their width =67/2 = 33.5%*/ 
    width: 50%; 
} 

.middle { 
    background-color: yellow; 
    float: right; 
    /*Each column takes have of the container size, so their width =67/2 = 33.5%*/ 
    width: 50%; 
} 

.right { 
    float: right; 
    width: 33%; 
    background-color: blue; 
} 

/*For tablet devices, show only the two columns in a row and a column underneath*/ 

@media (min-width: 481px) and (max-width: 768px) { 
    .tabletContainer, .right { 
     float: none; 
     width: auto; 
    } 

    .right 
    { 
     clear: both; 
     width: 50%; 
    } 
} 


/*For mobile phones, show only one column*/ 
@media (max-width: 480px) { 
    .tabletContainer, .left, .right, .middle { 
     float: none; 
     width: auto; 
     display: block; 
    } 




} 

HTML 또한 액체뿐만 아니라 이미지를 만들 필요가

<div class="container"> 
     <div class="tabletContainer"> 


      <div class="left">It is well enough that people of the nation do not understand our banking and monetary system, for if they did, I believe there would be a revolution before tomorrow morning. 
      </div> 
      <div class="middle">Under capitalism, man exploits man. Under communism, it's just the opposite. 
      </div> 

     </div> 
     <div class="right">One of the funny things about the stock market is that every time one person buys, another sells, and both think they are astute 
     </div> 
    </div> 

1. . 한 가지 트릭은 이미지의 고정 너비와 높이를 제거하는 것입니다.

CSS

/*Make images not resize outside of the column that they are in*/ 
img { 
    max-width: 100%;  
} 

HTML

<img src="imgs/clouds.jpg" alt="Clouds" class="half right"/> 

또한 %를 사용하여 이미지의 크기를 변경할 수 있습니다. 예를 들어 위의 예에서 이미지의 너비는 다음 CSS를 사용하여 컨테이너 너비의 50 %로 설정됩니다.

img.half { 
    max-width: 50%; 
} 

당신은 컨테이너의 왼쪽으로 떠하려면 :

img.left { 
    float: left; 
    margin: 0 10px 10px 0; 
} 

패딩/마진 원하는 효과를 얻을 수를 적용하여.

희망 도움말.