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>