CSS幫助將足夠的空間浮動到中心

Question

我想在有足夠的空間時在Web瀏覽器中居中。如果不是，它應該在2個div之間摺疊。

這是摺疊視圖

，這將是展開的視圖

我已經嘗試了很多不同的東西，但似乎沒有任何工作的權利。當我得到一些看起來不錯的東西時，filterDiv最終會超過titleDiv或buttonDiv或兩者。

這是一些我開始使用的代碼，當瀏覽器不是很寬的時候應該代表摺疊視圖。

<style type="text/css"> 
    .controlsDiv{ 
     background-color:yellow; 
     border: 1px solid black; 
    } 
    .titleDiv{ 
     background-color:Red; 
     width:25em; 
     height: 5em; 
     border: 1px solid black; 
    } 
    .filterDiv { 
     background-color: gainsboro; 
     width: 600px; 
     height: 10em; 
     border: 1px solid black; 
    } 
    .buttonDiv{ 
     width:25em; 
     height:5em; 
     background-color:green; 
     border: 1px solid black; 
    } 

</style> 

<div class="controlsDiv" > 
    <div class="titleDiv"> 
     <h2>titleDiv</h2> 
    </div> 
    <div class="filterDiv"> 
     <h2>filterDiv</h2> 
     <h2>Centered in Browser Window</h2> 
     <h2>titleDiv and ButtonDiv Collapsed</h2> 
    </div> 
    <div style:clear:both></div> 
    <div class="buttonDiv"> 
     <h2>buttonDiv</h2> 
    </div> 
</div> 

預先感謝您！

Answer 1

您可以隨時定位絕對必要的div：

<style type="text/css"> 
    .controlsDiv{ 
     background-color:yellow; 
     border: 1px solid black; 
    } 
    .titleDiv{ 
     background-color:Red; 
     width:25em; 
     height: 5em; 
     border: 1px solid black; 
    } 
    .filterDiv { 
     background-color: gainsboro; 
     width: 600px; 
     height: 10em; 
     border: 1px solid black; 
    } 
    @media(min-width: 900px) { 
     .filterDiv { 
     position: absolute; 
     left: calc(50% - 300px); 
     top: 0; 
    } 
    } 
    .buttonDiv{ 
     width:25em; 
     height:5em; 
     background-color:green; 
     border: 1px solid black; 
    } 
</style>