jquery 当第二个div隐藏时,强制Flex显示中的div为屏幕的50

bgibtngc  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(144)

我有一个这样的结构,一个div包含两个其他的:

  1. <div class="list-detail">
  2. <div class='first-list'>
  3. </div>
  4. <div class='second-list'>
  5. </div>
  6. </div>

字符串
我使用jquery填充它们,它们的css看起来像这样:

  1. .list-detail{
  2. display:flex;
  3. }
  4. .event-list, .match-list{
  5. width:100%;
  6. margin-left: 1%;
  7. }


width:100%允许div跨越整个屏幕,每个div的宽度为屏幕的50%。div second-list可以是空的,如果是这样,我会隐藏它。问题来了,当它被隐藏时,div first-list占据整个屏幕,在这种情况下,我希望div居中并占据屏幕的50%。我如何才能实现这一点?
我已经尝试过删除/修改width:100%,因为这可能是为什么当div second-list被隐藏时,它跨越整个屏幕的原因,但它会扰乱两个div都充满元素的用例。它们非常小/根本不居中。

siv3szwd

siv3szwd1#

你可以将visibility设置为hidden,但请记住,它会从UI中隐藏它,但这个div仍然会占用空间,你可以在下面的例子中看到这一点
或者,您可以将列表元素的flex basis设置为50%,并将想要隐藏或从DOM中删除的元素的display设置为none
根据你想要实现的目标,你也可以检查如何使用网格来实现。

  1. .list-detail {
  2. display: flex;
  3. gap: 10px;
  4. }
  5. .first-list,
  6. .second-list {
  7. flex: 1;
  8. height: 100px;
  9. border: 4px solid blue;
  10. }
  11. .first-list {
  12. visibility: hidden;
  13. }

个字符

展开查看全部
sbtkgmzw

sbtkgmzw2#

如果我理解正确的话,您希望在div.second-list为空时将div.first-list居中,并且还希望div.first-list占据50%的空间,解决方案如下

  1. let second = $('.second-list').text();
  2. if(second.length == 0){
  3. $('.second-list').remove();
  4. }
  1. .list-detail{
  2. display:flex;
  3. }
  4. .first-list, .second-list{
  5. margin: auto;
  6. width: 50%;
  7. border: 3px solid green;
  8. padding: 10px;
  9. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class="list-detail">
  3. <div class='first-list'>
  4. Magna adipisicing consequat reprehenderit culpa. Tempor aliquip enim occaecat nisi officia amet ex quis. Culpa esse consectetur eiusmod excepteur commodo sint velit cupidatat enim consequat enim officia mollit exercitation.
  5. </div>
  6. <div class='second-list'></div>
  7. </div>
展开查看全部

相关问题