容器 – 收缩包装并集中用于内嵌块元素的容器

前端之家收集整理的这篇文章主要介绍了容器 – 收缩包装并集中用于内嵌块元素的容器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一堆内联块元素在几行,我想要水平中心.内嵌块元素都具有相同的固定大小,但我希望中心能够处理页面大小调整和添加删除元素.

为了清楚起见,我已经删除了html / css并删除了中心的尝试.在http://jsfiddle.net/fe25H/1/

如果调整结果窗口的大小,使第三个内嵌块元素下降,容器将填充宽度,我们得到:

  1. -----------------BODY------------------
  2. | |
  3. ||-------------CONTAINER-------------||
  4. ||-INLINEBLOCK---INLINEBLOCK-- ||
  5. |||____________||____________| ||
  6. ||-INLINEBLOCK-- ||
  7. |||____________| ||
  8. ||___________________________________||
  9. |_____________________________________|

而不是这样:

  1. -----------------BODY------------------
  2. | |
  3. | |----------CONTAINER---------| |
  4. | |-INLINEBLOCK---INLINEBLOCK--| |
  5. | ||____________||____________|| |
  6. | |-INLINEBLOCK-- | |
  7. | ||____________| | |
  8. | |____________________________| |
  9. |_____________________________________|

基于ptriek关于JavaScript解决方案的回答进行编辑:

Ptriek的代码是一个有用的起点;它适用于具体情况,但不适用于一般情况.我大部分重写它更灵活(见http://jsfiddle.net/fe25H/5/).

解决方法

在想了一下之后,我同意Wex的评论.

所以我提出了一个JavaScript解决方案(jQuery) – 我不是一个专家,所以代码可能会改进 – 但是我猜这是你所需要的:

  1. var resizeContainer = function () {
  2. var w_window = $(window).width();
  3. var w_block = $('.inlineblock').width();
  4. if (w_window < w_block * 3 && w_window >= w_block * 2) {
  5. $('.container').width(w_block * 2);
  6. } else if (w_window < w_block * 2) {
  7. $('.container').width(w_block);
  8. } else {
  9. $('.container').width(w_block * 3);
  10. }
  11. };
  12.  
  13.  
  14. $(document).ready(resizeContainer);
  15. $(window).resize(resizeContainer);
  1. body {
  2. text-align:center;
  3. }
  4. .container {
  5. display: inline-block;
  6. background-color: #aaa;
  7. text-align:left;
  8. }
  9. .inlineblock {
  10. display: inline-block;
  11. width: 200px;
  12. height: 200px;
  13. background-color: #eee;
  14. }
  1. <div class='container'>
  2. <div class='inlineblock'></div>
  3. <div class='inlineblock'></div>
  4. <div class='inlineblock'></div>
  5. </div>

http://jsfiddle.net/ptriek/fe25H/4/

猜你在找的CSS相关文章