정렬되지 않은 목록에 대한 지원

Question

아이디어 테스트 http://www.devsite11.co.uk/about-us/areas-we-cover.html 세 개의 목록이있는 배경 상자를 만들었습니다. 목록에 P.C가 표시 될 때 모두 나란히 표시됩니다. 이는 예상대로입니다. 문제 iPad 또는 아이폰의 경우 목록이 축소되지 않고 뒤죽박죽입니다.

% 나이를 불문하고 놀았습니다.

나는 무엇이 일어나길 원 하나, 목록이 서로 아래로 떨어지거나, 텍스트가 줄서 나란히 있습니다.

도움을 주셔서 감사합니다. 당신은 이런 일을 할 수

Answer 1

:

.featurebox, .featurecenter, .featureright { 
     min-width:250px; /* or something smaller*/ 
    } 

는 당신을 위해 작동하는지 알려주세요?

Answer 2

각 기능 상자에 최소 너비를 설정하십시오 (예 : min-width:200px 또는 그 밖의 값을 너무 크게 축소하지 않도록 설정하십시오). 또한 각 상자의 공통된 스타일에 적용 할 수있는 클래스를 사용하는 것이 좋습니다.

또한 왼쪽에는 왼쪽 상자, 오른쪽에있는 "가운데"상자 및 가운데에있는 "오른쪽"상자가 있습니다. 세 가지 모두에서 부동 소수점을 float:left으로 바꾸어보십시오.

Answer 3

라인 147과 다른 스타일에서 너비는 31%으로 설정되어 있습니다. 예 :

#featurebox .featureleft { 
width: 31%; 
margin-left: 0px; 
padding-right: 10px; 
float: left; 
} 

작은 너비에서는 작동하지 않으므로 @media 규칙에서 해당 위치의 너비를 변경해야합니다. 예 :

@media only screen and (max-width: 770px) { 
    #featurebox .featureleft, 
    #featurebox .featurecenter, 
    #featurebox .featureright {width: 100%;} 
}