时间戳

首页 > 解决方案 > 流体调整大小，除了第一个 div

jquery - 流体调整大小，除了第一个 div

问题描述

我希望能够在单击选定的 flexed div 的宽度时展开/重置。

我主要担心的是我希望所有其他 div 也相应地实时调整大小以适应剩余空间。

所有这些都是第一个 div，我希望它始终具有固定宽度并且从不调整大小。

最后一部分是我要解决的问题。

我能做到这一点的唯一方法是：

HTML：

<div class="wrapper">

    <div class="divFixed">Fixed</div>

    <div class="data">

        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>

    </div>

</div>

<button>Expand</button>

CSS：

.wrapper{
    overflow:hidden;
    width:100%;
    border: 1px solid black;
}

.divFixed{
    width:50px; /* fixed */
    float:left;
    border-right: 1px solid black;
}

.data{
    width: calc( 100% - 51px );
    float:left;
    display: flex;
    justify-content: flex-start;
}

.divFluid{
    border-right: 1px solid black;
    overflow:hidden;
    transition: width 1s;
}

.divFluid:last-child{
    border-right: 0px;
}

jQuery：

var clickStatus=0;

$(document).on('click','button',function(e){
    if(clickStatus==0){
        $('.divFluid:nth-child(1)').css('width','300%');
        $('button').html('Reset');
        clickStatus=1;
    }
    else{
        $('.divFluid:nth-child(1)').css('width','100%');
        $('button').html('Expand');
        clickStatus=0;
    }   
})

这是jsfiddle：

https://jsfiddle.net/Lh5pnrcm/

这个例子非常清晰，完美地展示了我想要实现的目标。所以这很好用，但它不适合我的需要，因为我需要第一个 div 不被结构隔离。解释起来有点长，但是将其隔离在 HTML 中使我很难实现此处未解决的其他功能。

换句话说，我需要 HTML 是这样的，同时实现jsfiddle中显示的完全相同的结果：

<div class="wrapper">

    <div class="div">Fixed</div>
    <div class="div">Fluid</div>
    <div class="div">Fluid</div>
    <div class="div">Fluid</div>

</div>

<button>Expand</button>

那么您是否认为可以在使用 flex 时区分第一个 div 而无需将其与 HTML 中的其余 div 隔离（并且不使用表格）？

谢谢你。

标签： jquerycssflexboxresize

解决方案

也许您必须更具体，因为我只是将 HTML 更改为您想要的，调整 JS 选择器并添加min-width而不是widthCSS 并且它可以工作：

var clickStatus = 0;

$(document).on("click", "button", function(e) {
  if (clickStatus == 0) {
    $(".divFluid")
      .first()
      .css("width", "300%");
    $("button").html("Reset");
    clickStatus = 1;
  } else {
    $(".divFluid")
      .first()
      .css("width", "100%");
    $("button").html("Expand");
    clickStatus = 0;
  }
});
.wrapper {
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
    border: 1px solid black;
}

.divFixed {
    min-width: 50px; /* fixed width */
    background: #999;
    text-align: center;
    border-right: 1px solid black;
}

.data {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    background: #555;
}

.divFluid {
    width: 100%;
    border-right: 1px solid black;
    text-align: center;
    overflow: hidden;
    transition: width 1s;
}

.divFluid:last-child {
    border-right: 0px;
}

button {
    margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="data">
        <div class="divFixed">Fixed</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
        <div class="divFluid">Fluid</div>
    </div>
</div>
<button>Expand</button>

我也把它清理了一下，去掉了任何float. 您不能将浮动元素与 Flex 混合使用。

推荐阅读