가로 방향의 CSS 응답 목록 항목

Question

내 웹 사이트에는 3 개의 동일한 요소가 가로 형식으로 구성된 "추천"행이 있습니다. 비율 너비를 통합하여 웹 페이지를 반응 적으로 만들려고하지만 widnow를 목록 너비보다 작은 크기로 조정하면 항목이 서로 아래로 이동합니다.

Demo

내가 최대 폭을 추가하고, 특정 폭은 여전히 ​​auto 및 100%하지만 행운 인 만지작 노력했다.

전체 항목을 클릭 가능한 링크로 만들기 위해 앵커 내에 항목을 나열 할 때 코드가 잘못된 방식으로 표시 될 수도 있습니다. 여기

내 코드의 일부이며, 나머지는 바이올린에 :

CSS :

.FeatureRow { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
.FeatureRow li { 
    float: left; 
    width: auto; 
    margin: 10px; 
    background-image: -moz-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#ffffff)); 
    background-image: -webkit-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image:  -o-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image:   linear-gradient(to bottom, #fbfbfb, #ffffff); 
    background-repeat: repeat-x; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
} 
.FeatureRow a { 
    padding: 10px; 
    display: block; 
    width: 100%; 
    max-width: 260px; 
    height: auto; 
      border-radius: 5px; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
    -webkit-box-shadow: 0px 4px 8px #f5f5f5; 
     -moz-box-shadow: 0px 4px 8px #f5f5f5; 
      box-shadow: 0px 4px 8px #f5f5f5; 
    background-color: transparent; 
    transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
     -moz-transition: all 500ms ease-in-out; 
     -ms-transition: all 500ms ease-in-out; 
     -o-transition: all 500ms ease-in-out; 
} 

HTML :

<ul class="FeatureRow"> 
<li> 
    <a href="/contact/"> 
     <h2 class="SpeechBg">Need some help?</h2> 
     <p>Feel free to get in contact with us</p> 
    </a> 
</li> 
<li> 
    <a href="/property/"> 
     <h2 class="BinocularsBg">Country or City?</h2> 
     <p>You can always find a place, no mater where it is!</p> 
    </a> 
</li> 
<li> 
    <a href="/property/"> 
     <h2 class="CameraBg">Now that's scenary!</h2> 
     <p>We guarantee than you will love the views from all of our unique locations</p> 
    </a> 
</li> 
</ul> 

Answer 1

은 추가이 도움이됩니다.

.FeatureRow li{ 
    width: 30%; 
    display: inline-block; 
} 

실제로 작은 너비 화면의 경우 일반적으로 세로로 쌓아 두는 것이 좋습니다.

Answer 2

CSS에 @media 셀렉터를 사용해야합니다.

내가 블록이 서로 아래에 밀어 확인하기 위해 다음과 같은 CSS3를 추가 this fiddle

를 살펴 보자.

@media(max-width: 880px) { 
    .FeatureRow li { 
     width: 100%; 
    } 
} 
.FeatureRow a { 
    max-width: 100%' 

    } 
}