Question

我有这个页面包含4列，每列25％宽度和100％高度，4个按钮切换每一列。问题是我无法找到一种方法来使它们相应地调整大小。

当可见4列时，每列应为25％宽当可见3列时，每列应为33％宽等等 ... 但当我切换隐藏的那些再次可见时，他们需要相应调整，任何建议？

我为我的问题创建了一个代码段。

＆＃13;

$("#button-column-1").click(function() {
  $("#column-1").toggle(1500);
});

$("#button-column-2").click(function() {
  $("#column-2").toggle(1500);
});

$("#button-column-3").click(function() {
  $("#column-3").toggle(1500);
});

$("#button-column-4").click(function() {
  $("#column-4").toggle(1500);
});

＆＃13;

.column {
  float: left;
  height: 100vh;
  width: 25%;
  -webkit-box-shadow:inset 0px 0px 0px 1px black;
  -moz-box-shadow:inset 0px 0px 0px 1px black;
  box-shadow:inset 0px 0px 0px 1px black;
}

＆＃13;

<html>

  <head> </head>
  
  <body>
    
    <div id="button-container">
      
      <button type="button" id="button-column-1">Column 1</button>
      <button type="button" id="button-column-2">Column 2</button>
      <button type="button" id="button-column-3">Column 3</button>
      <button type="button" id="button-column-4">Column 4</button>
      
    </div>
    
    
  
    <div class="column" id="column-1">
      1
    </div>  
     <div class="column" id="column-2">
      2
    </div> 
     <div class="column" id="column-3">
      3
    </div> 
     <div class="column" id="column-4">
      4
    </div> 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
  </body>
  
</html>

＆＃13;

Answer 1

flexbox的使用完全符合您的布局。将列包装在块元素中，我使用了一个部分，然后添加以下CSS：

/* This is the element that contains the columns */
#setB {
  display:flex;
  flex-wrap:nowrap;
  justify-content: center;

 }
/* This ruleset will make the columns stretch and shrink when there's empty or less space. They will start adjusting when they are 24% or more in width.
.column {
  flex: 1 1 24%;
  ...

段

＆＃13;

$("#btn1").click(function() {
  $("#col1").toggle(1500);
});

$("#btn2").click(function() {
  $("#col2").toggle(1500);
});

$("#btn3").click(function() {
  $("#col3").toggle(1500);
});

$("#btn4").click(function() {
  $("#col4").toggle(1500);
});

＆＃13;

#setB {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.column {
  flex: 1 1 24%;
  height: 100vh;
  width: 25%;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}

＆＃13;

<html>

<head></head>

<body>

  <fieldset id="setA">

    <button id="btn1">Column 1</button>
    <button id="btn2">Column 2</button>
    <button id="btn3">Column 3</button>
    <button id="btn4">Column 4</button>

  </fieldset>


  <section id='setB'>
    <div class="column" id="col1">
      1
    </div>
    <div class="column" id="col2">
      2
    </div>
    <div class="column" id="col3">
      3
    </div>
    <div class="column" id="col4">
      4
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

</html>

＆＃13;

Answer 2

切换后

改变css宽度

https://jsfiddle.net/zprLtoj8/

$("#button-column-1").click(function() {
  $("#column-1").toggle(1500, function() {
       columnCalc();
  });
});

$("#button-column-2").click(function() {
  $("#column-2").toggle(1500, function() {
       columnCalc();
  });
});

$("#button-column-3").click(function() {
  $("#column-3").toggle(1500, function() {
       columnCalc();
  });
});

$("#button-column-4").click(function() {
  $("#column-4").toggle(1500, function() {
       columnCalc();
  });
});

function columnCalc () {
    $(".column").css('width', 100/$(".column:visible").length+'%'); 
}

更新

此类代码会将.column的列宽更改为33％ $（＆＃34; .column＆＃34;）。css（＆＃39; width＆＃39;，＆＃39; 33％＆＃39;）;

对于动态更改，我们必须知道.column有多少现在可见了我们可以这样算 $（＆＃34; .COLUMN：可见＆＃34）。长度

所以我们在可见的.column计数上划分100块宽度 100 / $（＆＃34; .COLUMN：可见＆＃34）。长度

因为css属性是％，我们必须添加它 100 / $（＆＃34; .COLUMN：可见＆＃34）+长度＆＃39;％＆＃39）

。

所以我们有最终的代码 $（＆＃34; .column＆＃34;）。css（＆＃39; width＆＃39;，100 / $（＆＃34; .column：visible＆＃34;）。length +＆＃39;％＆＃ 39）;

此外，我们必须等到动画结束才能进行计算

.toggle(1500, function() {
       columnCalc();
  });
});

切换4个div并在屏幕的整个宽度上显示它们

2 个答案:

段