미디어 쿼리를 사용하여 div를 반응 적으로 만듭니다.

반응 형 웹을 만들려고하고 있는데 미디어 쿼리를 수행하는 데 문제가 있습니다. 특정 div가 일부 div의 맨 아래에 오길 원합니다. 나는 CSS가 처음이다. 누군가가 이것에 대해 나를 도울 수 있습니까? 미디어 쿼리를 사용하여 div를 반응 적으로 만듭니다.

은 내가 "다가오는 이벤트"및 "콘텐츠"그것의이 "최신 뉴스" 사업부의 맨 아래로 이동합니다. 다가오는 이벤트와 그 내용은 다른 부서입니다. (min-width: 1025px) and (max-width: 1260px).

는 여기에 내가 바닥에 넣을이 개 된 div의 원래 CSS 코드입니다.

// this is the title div. The "Upcoming Events" 
.title2{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding-top: 19px; 
    padding-left: 15px; 
    padding-bottom: 5px; 
    margin-left: -7px; 
    width: 270px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 

} 
//here's the content 
.sidebar{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding:19px; 
    width: 270px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 
    max-height: 374px; 
    -webkit-font-smoothing: antialiased; 
} 


//news div 
    .leftbar{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding:19px; 
    width: 250px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 
    max-height:741px; 
    overflow-y:scroll; 
    margin-left: 20px; 

} 
//latest news title div 
.title{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding-top: 19px; 
    padding-left: 19px; 
    padding-right: 19px; 
    padding-bottom: 5px; 
    width: 250px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 
    margin-left: 20px; 

}

내 미디어

@media(min-width: 1025px) and (max-width: 1260px){ 
    .img-responsive{ 
    width: 260px; 
    height:70px; 
    } 
    .navbar-default .navbar-right > li > a { 
    padding: 0 10px; 
    margin-right:6px; 
} 
    .leftbar{ 


} 
.title{ 


} 
.title2{ 


} 
.sidebar{ 

} 
}

출처

2016-08-31 nethken

jsfiddle에 올려주세요. –

나는 jsfiddle을 가지고 있지 않다 .. – nethken

나는 그것을 당신의 jsfiddle에 넣을 수 있을까? – nethken

이 100 %로 최신 뉴스 컨테이너의 폭을 확인 쿼리

@media (min-width: 1025px) and (max-width: 1260px) 
{ 
    .title2, .sidebar{ 
     width : 100% !important; 
     max-width : 100% !important; 
    } 
}

출처

2016-08-31 05:37:24 Arjun

작동하지 않습니다 .... – nethken

미디어 쿼리에 CSS가 적용 되었습니까? 업데이트 된 답변 확인 – Arjun

처음부터 미디어 쿼리에 넣었습니다. – nethken

미디어 쿼리 좋은하지만 시간과는 엉망 정말 당신을 수 . 미디어 쿼리 대신 부트 스트랩을 실행하십시오. 깨끗하고 사용하기 쉽습니다. 클래스 이름을 추가하면됩니다. 부트 스트랩은 모든 것을 처리합니다. 참조 확인을 위해 link

출처

2016-08-31 05:59:29

미디어 쿼리를 사용하여 div를 반응 적으로 만듭니다.

답변

관련 문제