使用媒體查詢使分區響應

我正在嘗試創建響應式網頁，並且遇到了媒體查詢問題。我想要一個特定的div進入某個div的底部。我是新來的CSS。有人可以幫我解決這個問題嗎？使用媒體查詢使分區響應

我想「活動預告」和「內容」呢去的「最新消息」事業部底部。即將到來的事件和它的內容是不同的divs。在(min-width: 1025px) and (max-width: 1260px)之內。

這裏的2個的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

媒體查詢是好的，但耗時，它可以真正把你弄得一團糟。而不是媒體查詢去引導。它乾淨而且簡單易用，所有你需要做的就是添加類名，bootstrap會爲你做所有事情。作爲參考檢查這個link

來源

2016-08-31 05:59:29

使用媒體查詢使分區響應

回答

相關問題