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

Question

我希望能够 expand/reset 单击选定的弯曲宽度 div。

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

全部但是第一个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 中显示的 EXACT 相同结果：

<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 隔离（并且不使用table)?

谢谢。

Answer 1

也许你需要更具体一些，因为我只是将 HTML 更改为你想要的，调整 JS 选择器并将 min-width 而不是 width 添加到 CSS并且有效：

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 混合使用。

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

Fluid resize except first div

css

jquery

resize

flexbox